CSS透明度影響內容

我有一個CSS屬性的一個div像這樣：CSS透明度影響內容

div.header { 
    opacity:0.4; 
    filter:alpha(opacity=40); 
    background:#000; 
    width:300px; 
    height:300px; 
}

的問題是，是此DIV也有同樣的透明的內容。我怎麼才能讓背景顏色/ div顯示透明度而不影響該div內的內容？

來源

2012-08-10 John

您可以在後臺使用rgba：

div.header { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 

    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.4); 

    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); 

    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)"; 
}

的顏色IE由下式計算：

Math.floor(0.4 * 255).toString(16); // 0.4 is your desired opacity

它給你66使成爲第2位的顏色。

Source

來源

2012-08-10 01:20:43

您可以使用rgba顏色：

div.header { 
    background:rgba(0,0,0,0.4); 
    width:300px; 
    height:300px; 
}

來源

2012-08-10 01:17:22 Oriol

+1你應該聲明'rgb'財產_before_的RGBA的瀏覽器不這樣做'rgba'，你可以使用[漸變濾鏡]（http://msdn.microsoft.com /en-us/library/ms532997%28VS.85%29.aspx）對於不支持'rgba'的IE版本 – steveax 2012-08-10 01:19:20

你可以嘗試設置背景RGBA background: rgba(0, 0, 0, 0.6);其中0.6是狀混濁。或者將不透明度的背景放在某個div中，然後在該div中創建另一個帶有內容且沒有不透明度的div。

來源

2012-08-10 01:19:18

CSS透明度影響內容

回答

相關問題