如何僅在CSS/HTML中的一個項目上製作OPACITY

Question

問題：我輸入不透明度後：0.5（或其他）它適用於標題中的所有對象。我該如何解決它？在標題h1中輸入不透明度：1，h2不起作用。

這裏是的jsfiddle鏈接：http://jsfiddle.net/unyfmf3d/

這裏是CSS代碼：

body { 
    background: #E6E6E6; 
    color: black; 
} 

.header { 
    opacity:0.2; 
    margin:0px auto; 
    width:700px; 
    height:150px; 
    background: white; 
} 

#header h1 { 
    opacity:1; 
    font-family: times, Times New Roman, times-roman, georgia, serif; 
    color: #444; 
    margin:0px; 
    padding: 0px 0px 6px 0px; 
    font-size: 51px; 
    line-height:20px; 
    letter-spacing:-2px; 
    font-weight:bold; 
} 

#header h2 { 
    opacity:1; 
    font-family: Gill Sans, Verdana; 
    font-size: 11px; 
    line-height: 14px; 
    text-transform: uppercase; 
    letter-spacing:2px; 
    font-weight: bold; 
} 

Answer 1

嘗試這種方式

.header { 
    margin:0px auto; 
    width:700px; 
    height:150px; 
    background: rgba(255, 255, 255, 0.2); 
} 

Answer 2

的opacity使得整個DIV（有內容）更透明。

如果你只想讓背景透明，你可以這樣做：

.header { 
    margin:0px auto; 
    width:700px; 
    height:150px; 
    background-color: white; /*Obligatory fallback color, if the browser doesn't support rgba*/ 
    background-color:rgba(255, 255, 255, 0.2); 
} 

的RGBA意味着紅，綠，藍，阿爾法，因此，你需要寫的顏色爲RGB格式，白色的alpha是你的不透明度。

Answer 3

如果您只是想讓背景顏色透明，請使用background:rgba(255,255,255,0.2);並刪除opacity:0.2。不透明度代碼將影響整個塊。

RGBA代表紅色，綠色，藍色，Alpha（或透明度）。

JS小提琴鏈接 - http://jsfiddle.net/lustre/z0xmfsry/1/

Answer 4

遺憾的是不可能的，因爲在頭中的opacity設置將影響所有兒童，即使在技術上他們已經在1.0。

我會在標題的背景上使用透明度，就像這樣;

.header { 
    margin:0px auto; 
    width:700px; 
    height:150px; 
    background: rgba(255,255,255,0.2); 
} 

Answer 5

不透明度由兒童繼承。您可以刪除不透明度，而是使用background:rgba(255,255,255,0.2)這應該做你正在尋找。

Answer 6

因爲繼承的，你需要採取h元素跳出流程，即跳出#header DIV，使那些h元素重疊股利：

https://jsfiddle.net/unyfmf3d/3/

然後你可以調整自己的排名靠前top屬性。

下面是這個問題的一個很好的解釋：

https://css-tricks.com/non-transparent-elements-inside-transparent-elements/