html学习笔记(一)div的透明设置

 

要使得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中的字体却不会变得透明。

 

 

posted @ 2019-04-13 16:21  陆某人  阅读(12266)  评论(0编辑  收藏  举报