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中的字體卻不會變得透明。