html学习笔记（一）div的透明设置

最新推荐文章于 2023-05-20 20:12:52 发布

weixin_34361881

最新推荐文章于 2023-05-20 20:12:52 发布

阅读量396

点赞数 1

原文链接：http://www.cnblogs.com/1998xujinren/p/10701627.html

版权

要使得div的透明度设置，有两种方法。

第一种：使用opacity属性，单词的意思是不透明性，你可以设置它的值，范围是0到1,1为不透明，0为全透明。具体使用如下：

css代码：

#div01{    
        background:#FFF;
        width:500px;
        height:500px;
        opacity:0.5;
    }

body里面的代码：

<div id="div01">
            asdasjdkahsdkahdklashdlksa
        </div>

图片效果如下：

注意：这种方法会使得div中的所有内容都变得透明度一样，如果你设置全透明，则div中的字体也会变得全透明从而看不到。

第二种方法：

使用background：rgba（x1, x2, x3, x4）；x1,x2,x3分别为颜色的三个基本数据。x4位不透明度，范围为0到1，如果设为1，则不透明，设为0则全透明。

css代码：

#div01{        
        background:#FFF;
        width:500px;
        height:500px;
        background:rgba(200, 100, 100, 0.5);
    }

html代码：

<div id="div01">
            asdasjdkahsdkahdklashdlksa
        </div>

注意：这个设置的透明度就只有div的背景透明，而div中的字体不会跟着变。如果你设置为全透明，但是div中的字体却不会变得透明。

转载于:https://www.cnblogs.com/1998xujinren/p/10701627.html

关注