目录
前言
后面我会讲一下如何设置背景图片以及CSS中设置颜色的几种方法。 如果您想查看，请点击下面的链接。
设置背景图片的链接：link;
链接设置颜色：链接；
先说一下多背景图怎么写，还有渐变色、浏览器前缀和opacity透明度
1. 多张背景图片
后面讲了一些基础知识，所以有人会说，如何设置多张背景图片。
句子示例：
background: url(img/hq.png) no-repeat left top/300px,
url(img/ced.png) no-repeat right bottom/300px,
skyblue;
疗效如下：
总结：如果有背景色，就写在最后。
多个背景图像由冒号分隔。
很简单，相信你已经知道了。
2.渐变色
渐变颜色有两种渐变：一种是线性渐变；一种是线性渐变。 另一种是径向渐变。
需要注意的是，渐变使用的是背景属性，而不是背景颜色属性。 如果使用了background-color属性，则该属性无效。
渐变也可以使用背景图像来表示，但通常使用背景。
1. 线性渐变
顾名思义，线性渐变是指沿直线出现的渐变。 我们看到的大多数渐变效果都是线性渐变。
句子示例：
background:linear-gradient(方向, 开始颜色, 结束颜色)
background:linear-gradient(to top, red, blue)
疗效如下：
线性渐变的“方向”有两个值：一是使用角度（单位是deg）；二是使用角度（单位是deg）； 另一种是使用关键字，如右图所示。
线性渐变还可以接受一个“值列表”css3 渐变透明，用于同时定义多种颜色的线性渐变css3 渐变透明，颜色值之间用英文冒号分隔。
句子示例：
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和shapesize是可选参数。 如果省略，则使用默认值。 起始颜色和停止颜色都是必需参数，并且可以有多个颜色值。
中心位置
参数position用于定义径向渐变的“中心位置”，其值与background-position属性相同。 常用的值有两个：一是“长度值”（如10px）；二是“长度值”。 另一种是“关键字”（如top），如右图。 但看了上面的内容，你应该知道比率也是可以使用的。
你可以尝试改变中心位置的属性值，看看实际效果如何。
形状尺寸
参数 shape 用于定义径向渐变的“形状”。
参数size用于定义径向渐变的“大小”，如右图所示。
形状的句子示例：
#div1{
background:-webkit-radial-gradient(ellipse, orange,blue);
}
#div2{
background:-webkit-radial-gradient(circle,orange,blue);
}
疗效如下：
图片按句子顺序排列。
尺寸的句子示例：
#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用于定义径向渐变的“起始颜色”，参数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属性的值是一个数字，取值范围是0.0~1.0。 其中0.0表示完全透明，1.0表示完全不透明。
例如：
opacity:.5;
功效图：
它的透明度会直接影响到全部设置哪个bag
注意：
1、opacity属性不仅作用于元素的背景颜色，还作用于所有内部子元素和文本内容。
2.opacity属性在实际开发中也用的很多。 大多数时候，它与 :hover 一起使用，定义键盘何时连接到按钮或图片，并改变透明度以呈现动态效果。
写在最后
这片绿地从来不缺乏人才，努力才是最终的入场券。
你的喜欢就是我的动力
发表评论