首页 > Web开发 > 详细

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

时间:2019-04-13 17:19:28      阅读:134      评论:0      收藏:0      [点我收藏+]

 

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

 

 

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

原文:https://www.cnblogs.com/1998xujinren/p/10701627.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!