html img图片怎么设置透明度-木庄网络博客

html img图片怎么设置透明度

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

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

html img图片设置透明度的方法：1、给img图片设置“opacity:value;”样式，value值在0.0（完全透明）到1.0（完全不透明）之间；2、给img图片设置“filter:opacity(%);”样式。

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

html img图片设置透明度

方法1：使用opacity设置图片透明度

Opacity属性设置一个元素了透明度级别。

语法：

1	`opacity: value;`

属性值：

value：指定不透明度。从0.0（完全透明）到1.0（完全不透明）

示例：

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