CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法

最新推荐文章于 2024-05-05 11:27:28 发布

子慕拾

最新推荐文章于 2024-05-05 11:27:28 发布

阅读量1.4k

点赞数 9

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_71187097/article/details/125289011

版权

前言

在前面说了CSS怎样设置背景图片，与设置颜色的几种方式。如果你想查看可以点击以下链接。
设置背景图片的链接：link；
设置颜色的链接：link；
在这里说一下多个背景图片写法，以及渐变颜色、浏览器前缀和opacity透明度

一、多个背景图片

在前面说了一些基础，那么有人就会说，怎么去设置多个背景图片呢。
语法示例：

background: url(img/hq.png) no-repeat left top/300px,
			url(img/ced.png) no-repeat right bottom/300px,
			skyblue;

效果如下：

Alt
总结：如果有背景色，写在结尾。
多张背景图片用逗号，隔开。
非常的简单，相信你已经会了。

二、渐变颜色

渐变颜色共有两种渐变：一种是线性渐变；另外一种是径向渐变。
特别注意一点渐变使用的是background属性，而不是background-color属性。如果使用background-color属性，则无效。
也可以使用background-image来表示渐变，但一般使用background。

1.线性渐变

顾名思义线性渐变指的是在一条直线上进行的渐变。我们见到的大多数渐变效果都是线性渐变。
语法示例：

background:linear-gradient(方向, 开始颜色, 结束颜色)
background:linear-gradient(to top, red, blue)

效果如下：

Alt

线性渐变的“方向”取值有两种:一种是使用角度（单位为deg）;另外一种是使用关键字，如下图所示。
Alt
线性渐变也可以接受一个“值列表”，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。
语法示例：

 background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

效果如下：

Alt

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);

效果如下：
图片根据语法顺序排列。
Alt Alt Alt Alt Alt

说明：

其中，position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。

圆心位置

参数position用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样。常用取值有两种：一种是“长度值”（如10px）；另外一种是“关键字”（如top）,如下图所示。但看前面你应该知道，也是可以用百分比的。
Alt
大家可以尝试改变圆心位置属性值，看看实际效果如何。
shape size
参数shape用于定义径向渐变的“形状”。
参数size用于定义径向渐变的“大小”，如下图所示。
Alt
shape语法示例：

#div1{
     background:-webkit-radial-gradient(ellipse, orange,blue);
 }
 #div2{
     background:-webkit-radial-gradient(circle,orange,blue);
 }

效果如下：
图片根据语法顺序排列。
Alt Alt
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);}

效果如下：
图片根据语法顺序排列。
Alt Alt Alt Alt
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中，常见的浏览器私有前缀如下图：

Alt
现在主流浏览器最新版本对CSS3的支持性都很高

4.opacity透明度

语法示例：

opacity:数值;

opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。
例如：

opacity:.5;

效果图：
Alt
它的透明度会直接影响到设置的那个盒子全部
注意：
1.opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。
2. opacity属性在实际开发用得也比较多，大多数时候都是配合:hover来定义鼠标移动到某个按钮或图片上时，改变透明度来呈现动态的效果。