目录
前言一、多个背景图片二、渐变颜色1.线性渐变2.径向渐变3.浏览器前缀4.opacity透明度写在最后前言
在前面说了CSS怎样设置背景图片，与设置颜色的几种方式。如果你想查看可以点击以下链接。
设置背景图片的链接：link；
设置颜色的链接：link；
在这里说一下多个背景图片写法，以及渐变颜色、浏览器前缀和opacity透明度
一、多个背景图片
在前面说了一些基础，那么有人就会说，怎么去设置多个背景图片呢。
语法示例：
background: url(img/hq.png) no-repeat left top/300px,url(img/ced.png) no-repeat right bottom/300px,skyblue;
效果如下：
总结：如果有背景色，写在结尾。
多张背景图片用逗号 ， 隔开。
非常的简单，相信你已经会了。
二、渐变颜色
渐变颜色共有两种渐变：一种是线性渐变；另外一种是径向渐变。
特别注意一点渐变使用的是background属性，而不是background-color属性。如果使用background-color属性，则无效。
也可以使用background-image来表示渐变，但一般使用background。
1.线性渐变
顾名思义线性渐变指的是在一条直线上进行的渐变。我们见到的大多数渐变效果都是线性渐变。
语法示例：
background:linear-gradient(方向, 开始颜色, 结束颜色)background:linear-gradient(to top, red, blue)
效果如下：
线性渐变的“方向”取值有两种:一种是使用角度（单位为deg）;另外一种是使用关键字，如下图所示。
线性渐变也可以接受一个“值列表”，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。
语法示例：
background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
效果如下：
2.径向渐变
径向渐变，指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。径向渐变是圆形渐变或椭圆渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。
语法示例：
background:radial-gradient(圆心位置 形状大小, 开始颜色, 结束颜色)；
background: radial-gradient(red,blue);// 100px 100px 代表径向半径 水平 垂直 background: radial-gradient(100px 100px,red,blue);background: radial-gradient(100px 200px,red,blue);// 使用关键字background: radial-gradient(at bottom right,red,blue);// 使用百分数background: radial-gradient(at 50% 10%,red,blue);
效果如下：
图片根据语法顺序排列。
说明：
其中，position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。
圆心位置
参数position用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样。常用取值有两种：一种是“长度值”（如10px）；另外一种是“关键字”（如top）,如下图所示。但看前面你应该知道，也是可以用百分比的。
大家可以尝试改变圆心位置属性值，看看实际效果如何。
shape size
参数shape用于定义径向渐变的“形状”。
参数size用于定义径向渐变的“大小”，如下图所示。
shape语法示例：
#div1{background:-webkit-radial-gradient(ellipse, orange,blue);}#div2{background:-webkit-radial-gradient(circle,orange,blue);}
效果如下：
图片根据语法顺序排列。
size语法示例：
#div1{background:-webkit-radial-gradient(circle closest-side, orange, blue);}#div2{background:-webkit-radial-gradient(circle closest-corner, orange, blue);}#div3{background:-webkit-radial-gradient(circle farthest-side, orange, blue);}#div4{background:-webkit-radial-gradient(circle farthest-corner, orange, blue);}
效果如下：
图片根据语法顺序排列。
start-color和 step-color
参数start-color用于定义径向渐变的“开始颜色”，而参数stop-color用于定义径向渐变的“结束颜色”。此外，径向渐变也可以接受一个“值列表”，用于同时定义多种颜色的径向渐变。
标识位：
多个标识位：
渐变范围是40% - 80%
语法示例：
background: linear-gradient(to right,red 40%,blue 80%);
一个标识符：
渐变范围是30% - 100% 30% 代表红色占0%，剩下为蓝色
语法示例：
background: linear-gradient(to bottom,red,30%,blue);
在真正的开发中，大多数渐变效果都是线性渐变，因此我们更需要重点掌握线性渐变。
在前面说了渐变只能用background或者background-image，不能用background-color。同样直接给字体也不能用渐变。那么我们就可以结合前面的背景来实现字体渐变色。
实例演示：
background: linear-gradient(to left, skyblue, palevioletred);color: transparent;-webkit-background-clip: text;
看了前面的，相信你已经大概懂了，我就简单说一下。给背景一个渐变色，字体透明颜色，在裁剪背景为字体前景色。从而实现字体渐变色。
3.浏览器前缀
由于CSS3新增的有些属性尚未成为W3C标准的一部分，因此对于这些属性来说，部分浏览器都只能识别“带有自身私有前缀的属性”。也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。
就例如前面的渐变色，有些时候就需要写上前缀。
在CSS3中，常见的浏览器私有前缀如下图：
现在主流浏览器最新版本对CSS3的支持性都很高
4.opacity透明度
语法示例：
opacity:数值;
opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。
例如：
opacity:.5;
效果图：
它的透明度会直接影响到设置的那个盒子全部
注意：
1.opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。
2. opacity属性在实际开发用得也比较多，大多数时候都是配合:hover来定义鼠标移动到某个按钮或图片上时，改变透明度来呈现动态的效果。
写在最后
这片绿茵从不缺乏天才，努力才是最终的入场券。
👍 您的点赞是我前进的动力
⭐ 您的收藏是我努力的方向
✏️ 您的评论是我进步的源泉
