CSS属性之线性渐变实现透明度渐变和重复渐变效果

线性渐变是css中常用的渐变效果，除了普通的线性渐变效果，还可以通过它实现透明渐变和重复渐变的效果1.透明渐变使用线性渐变实现透明渐变的效果需要使用到rgba方法来调整颜色值。语法格式:background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1),url(图片路径))如上所示，改代码表示的内容是实现线性的透明

小扬同学的笔记

7305人浏览 · 2021-12-11 23:18:14

小扬同学的笔记 · 2021-12-11 23:18:14 发布

线性渐变是css中常用的渐变效果，除了普通的线性渐变效果，还可以通过它实现透明渐变和重复渐变的效果

1.透明渐变

使用线性渐变实现透明渐变的效果需要使用到rgba方法来调整颜色值。

语法格式:

background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1),url(图片路径))

如上所示，改代码表示的内容是实现线性的透明渐变效果，to right定义的是渐变方向表示从左到右渐变，除了to right(向右渐变) 还有to left(向左渐变) to top(向上渐变) to bottom(向下渐变)。定义完渐变方向之后，就可以定义颜色值了，颜色值的定义最少要有两个。这里的颜色值的定义都是采用rgb的方式进行定义。rgb的参数是三个值，后面的0和1表示透明程度。0表示完全透明 1表示完全不透明。设置完颜色值之后，就插入图片。

注意:透明渐变的实现类似于ps中的蒙版，颜色的设置必须在图片的前面，才能达到一个遮住的效果，才会有朦胧的透明感，如果将图片设置在颜色值的前面，那么就无法起到渐变的效果！！！

如图所示，实现了一个从左到右的线性渐变的效果，左边是完全透明，所以下一层的图片就完整的显示出来了，右边是完全不透明，所以就会被设置的颜色值给遮住，从左到右就呈现出了一个整体的透明渐变的效果

当然，这种透明渐变效果还是过于简单，缺乏整体的美感，为此，css中的线性渐变属性还有重复渐变效果

2.重复渐变

语法格式:

repeating-linear-gradient(to right,#43a1d5,#43a1d5 20px,#ffffff 20px,#ffffff 40px)
/*如上所示，通过repeating-linear-gradient方法来实现重复的线性渐变的定义
然后先定义渐变方向 之后定义渐变的颜色，因为是重复的线性渐变，所以要设置各元素所占的空间 当一个元素占完这个空间之后 就到下一个颜色 如此循环直到占满整个容器*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.container{
			/*设置容器大小*/
			width: 300px;
			height: 300px;
			border: 1px solid red;
			
			/*设置重复的线性渐变效果*/
			background: repeating-linear-gradient(to right,#43a1d5,#43a1d5 20px,#ffffff 20px,#ffffff 40px);
/*这里设置的效果表示 从左往右实现重复渐变 第一个元素是#43a1d5 直到这个颜色值占满20px的空间 就到下一个颜色#ffffff 这个颜色同样占20px的空间 但是第一个出现的地方在20px 即第一个颜色值的结束位置 以此重复 直到占满整个容器*/

		}
		</style>
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>

最终效果图如下

注意：在使用重复线性渐变的效果的时候，一定要记得定义容器的大小，否则只是一个div标签的话是无法显示效果的。还有第一个颜色值的结束位置就是下一个颜色值的开始位置。颜色值和所占的空间设置使用空格隔开各个颜色值之间使用逗号隔开方向的设定与颜色值的设定两者之间也是使用逗号隔开。颜色值可以设置多个，但是最少要有两个才能达到重复线性渐变的效果