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