css怎么设置图片的透明度(2)-木庄网络博客

2022-03-17 21:38:09 PHP中文网 JavaScript 百度已收录

方法2：使用opacity属性

Opacity属性设置一个元素了透明度级别。值的范围：从0.0（完全透明）到1.0（完全不透明）。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .img1{
                opacity: 0.5;
                 
            }
            .img2{
                opacity: 0.2;
                 
            }
        </style>
    </head>
    <body>
        <div>
            <p>原图：</p>
        　　<img src="img/1.jpg" width="300"/>
        </div>
        <div>
            <p>透明度为0.5：</p>
        　　<img class="img1" src="img/1.jpg" width="300"/>
        </div>
        <div>
            <p>透明度为0.2：</p>
        　　<img class="img2" src="img/1.jpg" width="300"/>
        </div>
    </body>
</html>