css怎么实现不透明度渐变 css怎么实现不透明度渐变颜色

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，可以使用linear-gradient()或radial-gradient()渐变函数配合rgba()来设置不透明度渐变。

linear-gradient()和radial-gradient()函数可以设置渐变效果：

• linear-gradient()：创建线性渐变

• radial-gradient()：创建径向渐变

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

代码示例：

		
			div{
				box-sizing: border-box;
				width: 400px;
				height: 320px;
				font-size: 22px;
				padding-top: 100px;
				overflow: hidden;
				background: no-repeat center top / 100% 100%;
			}
			.div1 { 
				background-image: url(img/1.jpg)
			}
			.div2 {
				background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
			}
			.div3 {
				background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
			}
			
		
		正常图片

		设置线性渐变不透明度效果的图片
		设置径向渐变不透明度效果的图片