html怎么设置背景透明度


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

在html中,如果是背景颜色,可以利用rgba()函数或者opacity属性来设置颜色透明度;如果是背景图片,可以利用opacity属性和“filter:opacity(%)”样式来设置图片透明度。

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

1、设置背景颜色的透明度--利用rgba()函数或者opacity属性

示例1:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<style>

#p1 {background-color:rgb(255,0,0,0.3);}

#p2 {background-color:rgb(0,255,0,0.3);}

#p3 {background-color:rgb(0,0,255,0.3);}

#p4 {background-color:rgb(192,192,192,0.3);}

#p5 {background-color:rgb(255,255,0,0.3);}

#p6 {background-color:rgb(255,0,255,0.3);}

</style>

</head>

 

<body>

<p>RGB 颜色,并使用透明度:</p>

<p id="p1">红色</p>

<p id="p2">绿色</p>

<p id="p3">蓝色</p>

<p id="p4">灰色</p>

<p id="p5">黄色</p>

<p id="p6">樱桃色</p>

 

 

</body>

效果图:

1.png

示例2:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<style>

    .demo{

        width: 280px;

        height: 140px;

        margin: 50px auto;

    }

    .demo1,.demo2{

        width: 120px;

        height: 120px;

        margin: 10px;

        float: left;

        background:#2DC4CB;

    }

    .demo1{

        opacity:1;

    }

    .demo2{

        opacity:0.5;

    }

</style>

</head>

<body>

<div class="demo">

    <div class="demo1">

        <p>背景色不透明,文字不透明!</p>

    </div>

    <div class="demo2">

        <p>背景色透明,文字也透明!</p>

    </div>

</div>

</body>

效果图:

2.png

2、设置背景图片透明度--使用opacity属性和“filter:opacity(%)”样式

阅读剩余部分

相关阅读 >>

Html是一种什么

5种你一定不知道的Html空格表示方法

Html怎么禁止页面放大缩小

Html的标签有哪些

Html中新建表格怎么加背景

Html取消滚动条的方法

Html、css和js的注释规范用法有哪些

认识Html5的websocket

Html中div是什么

Html中的注释怎么写?Html中的注释符号又是什么?(附实例)

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




打赏

取消

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

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

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

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

评论

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