大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/37

渐变拼音jiàn biàn,意思是一种有规律性的变化。渐变能给人很强的节奏感和审美情趣。这种形式在日常生活中随处可见,是一种常见的视觉形象。由于绘画中透视的原理,物体就会出现近大远小的变化,许多自然理象都充满了渐变的形式特点。运用渐变技术能使画面更加丰富,给人视觉更强的冲击力。

background-image-设置元素的背景图片

定义

将图形(例如 PNG、SVG、JPG、GIF、WEBP)或渐变应用于元素的背景。

有两种不同类型的图像可以包含在 CSS 中:常规图像和渐变。

属性值

url('URL')

图像的URL

background-image: url(./bk.jpg);

none

默认值,无图像

渐变

linear-gradient() 线性渐变

默认是从上往下创建一个线性渐变的图像

background-image: linear-gradient(#55efc4,#a29bfe);

语法
background-image:linear-gradient(角度/to,颜色,颜色  开始渐变的位置, ......);

background-image:linear-gradient(),linear-gradient()...;

根据语法,合理猜测,从上往下,默认是180deg或者 to bottom,

浏览器默认会把第一个颜色的位置设置为0%,把最后一个颜色的位置设置为100%

举例1 deg
background-image: linear-gradient(45deg,#55efc4,#a29bfe);

举例2 to语法
background-image: linear-gradient(to left top,#55efc4,#a29bfe);

举例3 多颜色以及位置
linear-gradient(#55efc4,#a29bfe 30%,#fd79a8 50% )

接收多个linear-gradient

错误例子

background-image: linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient( #d63031,#e84393);

第二个渐变并没有出现,这是因为第一个渐变是从0-100%的,占满了整个元素,所以第二个没有出现。

正确示例,使用transparent

使用transparent *%;的方式来将部分空间来透明化,从而显示其他渐变。

background-image: linear-gradient(45deg,#55efc4,#a29bfe,transparent 50%),linear-gradient( #d63031,#e84393);

radial-gradient() 径向渐变

径向渐变创建 "图像"。 从中心往四周,发散的形状是圆形或者椭圆形

语法
background-image: radial-gradient([形状 大小 at(位置)],开始颜色,......,终止颜色);

形状

ellipse (默认): 椭圆形的径向渐变。

background-image: radial-gradient( #48dbfb,#ee5253);

circle :圆形的径向渐变

background-image: radial-gradient( circle,#48dbfb,#ee5253);

size

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边

background-image: radial-gradient(closest-side ,#48dbfb,#ee5253);

closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角

background-image: radial-gradient(closest-corner at 20%,#48dbfb,#ee5253);

farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边

background-image: radial-gradient(farthest-side at 20%,#48dbfb,#ee5253);



at(位置)

at center(默认):中间为径向渐变圆心的纵坐标值。

background-image: radial-gradient(at center,#48dbfb,#ee5253);

at top:顶部为径向渐变圆心的纵坐标值。

background-image: radial-gradient(at top,#48dbfb,#ee5253);

at bottom:底部为径向渐变圆心的纵坐标值。

background-image: radial-gradient(at top,#48dbfb,#ee5253);

at 值:值所在位置为径向渐变圆心的横坐标值

background-image: radial-gradient(at 1590px,#48dbfb,#ee5253);

conic-gradient 圆锥渐变

圆锥渐变类似于径向渐变。两者都是圆形并使用元素的中心作为色标的源点。然而,在径向渐变的色标从圆心出现的地方,圆锥渐变将它们放置在圆周围。

制作一个 位于[某个点]的 圆锥梯度,该 渐变以 某个角度的[一种颜色] 开始, 并 以 [某个角度] 的[另一种颜色]结束

大概就是下面这么个效果,从

语法
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
举例1 只有渐变色
background-image: conic-gradient(#2ecc71, #e52e71);

举例2 at语法 规定中心点位置
background-image: conic-gradient(at 30% 40%, #2ecc71, #e52e71);

举例3 from语法,规定圆锥初始位置
    background-image: conic-gradient(from 45deg, #2ecc71, #e52e71);

举例4 from at 同时使用

background-image: conic-gradient(from 45deg at 30% center, #2ecc71, #e52e71);

举例5 颜色后面+百分比

background-image: conic-gradient(#2ecc71 70%, #3498db, #e52e71);

举例6 颜色后面+角度/turn

background-image: conic-gradient(#2ecc71 45deg, #e52e71 0.5turn );

repeating-linear-gradient()

创建重复的线性渐变 "图像"。

这个属性与liner-gradlient的参数用法一致,

区别就是

只有当首尾两颜色位置不在0%或100%时,会产生重复渐变

background-image: repeating-linear-gradient( #48dbfb,#ee5253);

这种方式就无法产生渐变

background-image: repeating-linear-gradient( #48dbfb,#ee5253 10%);

repeating-radial-gradient()

创建重复的径向渐变 "图像"

这个属性与radial-gradlient的参数用法一致,

区别就是

只有当初终两颜色位置不在0%或100%时,会产生重复渐变

background-image: repeating-radial-gradient( #48dbfb,#ee5253);

这种方式就无法产生渐变

background-image: repeating-radial-gradient( #48dbfb,#ee5253 );

关于 background-image 渐变gradient()那些事!的更多相关文章

  1. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  2. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  3. CSS3的渐变-gradient

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). CSS3的线性渐变 一.线性渐变在Mozilla下的应用 语法: -moz-li ...

  4. background 和渐变 总结

    一,background-position:(图片定位) 三种写法: 1):按%比,左上角最小(0%,0%),右下角最大(100%,%100): 2):(x,y)左上角最小(0,0),右下角最大(ma ...

  5. css3渐变gradient

    参考: http://www.w3cplus.com/content/css3-gradient

  6. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  7. Android shape 渐变!描边!圆角!示例详解

    看看shape的用法,确实很有帮助.这里我偷懒转一篇比较详细的帖子,和大家一起进步~! Android 中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体 ...

  8. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  9. CSS3的线性渐变(linear-gradient)

    CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...

  10. css3中“渐变”兼容性解决方案

    这次是简单的谈一下我们常见的渐变在各个浏览器下的兼容性问题,算一个比较简单的问题. 我们熟知的浏览器有Chrome.Firefox.Opera.Safari以及ie系列.最基础的background: ...

随机推荐

  1. mysql批量执行sql文件

    1.待执行的sql文件为1.sql.2.sql.3.sql.4.sql等 2.写一个batch.sql文件: source .sql; source .sql; source .sql; source ...

  2. CSS基础(01)

    1. Css基础 1.1 CSS(层叠样式表 Multiple Styles)   CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...

  3. BZOJ 2631: tree( LCT )

    LCT...略麻烦... -------------------------------------------------------------------------------- #inclu ...

  4. Inno Setup入门(十八)&mdash;&mdash;Inno Setup类参考(4)

    分类: Install Setup 2013-02-02 11:29 406人阅读 评论(0) 收藏 举报 编辑框 编辑框也叫文本框,是典型的窗口可视化组件,既可以用来输入文本,也可以用来显示文本,是 ...

  5. numpy地址

    pip安装  http://zhidao.baidu.com/link?url=nkRwDOZ1ALMjRsWHGMR1nLSIyuVycoD4j-mhGDsYptPwDRGYcE8u4_B9VvYk ...

  6. warnings.warn(&quot;allowed_domains accepts only domains, not URLs. Ignoring URL entry %s in allowed_doma

    多页面循环爬取数据抛出如下异常 warnings.warn("allowed_domains accepts only domains, not URLs. Ignoring URL ent ...

  7. Leetcode 347.前K个高频元素 By Python

    给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums = [1], ...

  8. Integer诡异特性

    package 代码测试; public class ceshi { public static void main(String[] args) { Integer i1=100; Integer ...

  9. spring中集成shiro

    Shiro的组件都是JavaBean/POJO式的组件,所以非常容易使用Spring进行组件管理,可以非常方便的从ini配置迁移到Spring进行管理,且支持JavaSE应用及Web应用的集成. 在示 ...

  10. python报错IndexError: list index out of range

    今天写个ping vpn的python脚本,报错IndexError: list index out of range 最后查看是python读取文件中出现空格 去掉空格即可