linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
css语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
在linear-gradient() 函数中使用rgba即可设置透明度渐变。
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了“alpha”通道，运行对颜色值设置透明度。
设置图片透明度渐变示例：
<html>
<head>
<title>图片透明度渐变实例演示</title>
<style>
.div1{
box-sizing:border-box;
width:400px;
height:240px;
font-size:22px;
padding-top:100px;
overflow:hidden;
background:no-repeat center top / 100%;
background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)),
url(img/3.webp)
}
.div2{
box-sizing:border-box;
width:400px;
height:240px;
font-size:22px;
padding-top:100px;
overflow:hidden;
background:no-repeat center top / 100%;
background-image: url(img/3.webp)
}
</style>
<div class="div1">
</div>
<div class="div2"></div>
</body>
</html>效果图：
以上就是css图片怎么设置透明度渐变？的详细内容，更多请关注易知道|edz.cc其它相关文章！
