CSS3教程:background-image之线性渐变(linear-gradient)详解

转载 (原文地址) oliven 教程 CSS3 204阅读 2018-05-04 16:56:30 举报

一、线性渐变的基础知识介绍

先利用flash的渐变变形工具了解一下线性渐变的原理。

设置了一个如图的线性渐变条,三个色彩,位置分别是0%,50%,100%,默认左边第一个颜色是起始色,最后一个是终点色。

渐变的效果最关键的是渐变线的长度和角度,如图:

什么是渐变线?

渐变线就是两条黑线中间那条垂直的红色线条。黑色线条代表了色彩的渐变范围,黑线以外的是对应的那个颜色的单色。黑线以内的才是渐变色。

渐变线上按照渐变条的色块依次排列颜色。你从哪里开始拉出线条,那里就是你的起点,哪里结束线条,那里就是你的终点。如图:

渐变线的长度可以改变,拉出的渐变线越长,色块隔得越远,渐变越自然,拉出的渐变线越短,色块隔得越近,渐变越生硬。

色块自身的位置和多少也是可以在渐变条上调整的。比如:

除了渐变线的长度,还可以调整角度和中心点的位置。调整角度说直白一点就是你拉这条线的方向。中心点的移动只能沿着渐变线移动。

直接打开flash软件,用渐变变形工具自己调试,看的会直观很多。

有了这个基础,你再看mozilla官方文档上这个没头没尾的图示,是不是秒懂?

二、在css3中线性渐变的标准语法结构

"Definition of the gradient line"就是定义渐变线的意思,可以通过角度或者指定上右下左等方位来控制渐变线的方向。

"List of color stops"就是渐变条上的色块列表。

三、线性渐变小实例

1、45度三色线性渐变,初始值为黄色,中间值为绿色,结束值为粉色。角度可以设置负数。

没有设置颜色的具体位置时,三个色块默认平均分布。

45度的夹角是从起点往右上拉出的,所以起始色在左下,结束色在右上。

2、利用上右下左的方位设置线性渐变

如果不设置任何的角度和方位,则默认是从上往下。可以为某个颜色设置具体的位置,可以是百分比,或者是具体的像素。

如果设置从左往右的彩虹条,就需要加上方位了。

还可以设置对角方向的渐变。

对角线的设置是:to 垂直 水平,比如to bottom right,指的是从左上角拉到右下角。

垂直方向的两个值是top、bottom,水平方向的值是left、right,可以自由组合。

3、颜色为rgba的半透明的值。

没加半透明渐变前:

添加渐变后:

上面的这个方法用在图片是普通的 img标签 图片上,如果这里的图片是一个背景图片,则可以使用css3的多重背景搞定。

在css3里,背景支持一个容器放置多个背景图片了。越前面的背景越处于上层。

效果是一模一样的!

不过代码就要简单多啦!

所以归纳起来,大概就是这么几点:

1、可以不设置渐变线的方位,那么默认从上往下拉线性渐变。

2、可以用角度控制渐变线的方向。可以正值,可以负值,比如90deg,或者-145deg。

3、可以用leftrighttopbottom组合方位。"to bottom"就是默认值,"to left"就是从右往左拉渐变线。"to top right"就是从左下往右上拉出对角线的渐变线。

4、颜色至少要有两个,就是起始色和结束色必须要有。

5、颜色可以n多个,用逗号隔开,可以设置透明色。

6、一个颜色可以设置对应的位置,比如“red 50%”,"yellow 50px",此时一个颜色只能设置一个值,中间用空格隔开。

7、用口水话描述就是“渐变线方位,颜色1 颜色位置,颜色2 颜色位置,……”

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复