css背景图片怎么设置透明度渐变-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

css中，可以利用linear-gradient()和rgba()函数实现图片的透明度渐变，语法“background-image:linear-gradient(to top,rgba(..), rgba(..)),url(..)”。

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

css背景图片设置透明度渐变

在css中，可以利用linear-gradient()和rgba()函数实现图片的透明度渐变

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <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% 100%;
                background-image: url(img/3.jpg)
            }
            .div2 {
                box-sizing: border-box;
                width: 400px;
                height: 240px;
                font-size: 22px;
                padding-top: 100px;
                overflow: hidden;
                background: no-repeat center top / 100% 100%;
                background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/3.jpg)
            }
             
             
        </style>
    </head>
 
    <body>
        <p>原图：</p>
        <div class="div1"></div>
        <p>透明度渐变：</p>
        <div class="div2"></div>
    </body>
 
</html>