html img图片怎么设置透明度


本文摘自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(完全不透明)

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!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>

效果图:

1.png

【推荐教程:CSS视频教程 、《html视频教程》】

方法2:使用filter:opacity(%)

阅读剩余部分

相关阅读 >>

利用css实现鼠标悬停效果

css里的rgb怎么用

css animation-duration属性怎么用

css怎样设置p标签不换行

css border-collapse属性怎么用

Html元素一般被分为哪两类

css实现将网页变成黑白色

实现在Html页面加载完毕后运行js方法

css perspective属性怎么用

利用css3进行弹性布局时内容对齐的方法详解

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...