不透明度的聲明是由父母繼承即使聲明明確

我有以下CSS不透明度的聲明是由父母繼承即使聲明明確

.dropdown-menu { 
    background-color: black; 
    opacity: 0.6; 
    color: white; 
} 
.dropdown-menu > li { 
    background-color: black; 
    opacity: 1; 
    color: white; 
}

當HTML元素（使用這個上面CSS）加載我越來越不透明度設置爲從.dropdown-menu預期，問題是當我在不透明度上使用!important聲明時，此不透明度在dropdown-menu > li元素事件內繼承。

那麼如何克服這一點（不透明度應保持在父母元素0.6），並在這個孩子我想不透明1？

來源

2015-11-15 user1765862

Afaik這是不可能的。如果父元素具有不透明性，則所有子元素都至多具有該不透明性。如果父母和孩子都有.5的不透明度，那麼孩子的透明度就有效。 – Sumurai8

@Paulie_D錯誤的問題被標記爲重複，應重新打開或重新投票到另一個問題作爲重複。 –

而不是使用opacity爲父元素，請以rgba格式聲明您的顏色。

.dropdown-menu { 
    background-color: rgba(0,0,0,.6); 
    color: rgba(255,255,255,.6); 
}

這樣，您將保留父元素的opacity，以及你的子元素將有1

Browser support用於該方法的透明度是相當體面的爲好。

另外，我在你的問題閱讀，「問題是，這不透明度繼承」

不，這是不能繼承。

來源

2015-11-15 11:38:09

這是正確的答案，特別是關於繼承的附錄。 – hurrtz

重要的是要知道opacity設置元素及其所有子元素的不透明度值;其中RGBA僅爲單個聲明設置不透明度值。

所以，你應該使用類似：

.dropdown-menu { 
    background-color: rgba(0,0,0,.6); 
    color: rgba(255,255,255,.6); 
}

（當然，你也可以使用HSLA -property此）

記住opacity - 屬性不完全受所有瀏覽器支持，請查看此SA主題獲得更多相關信息：CSS background opacity with rgba not working in IE 8

來源

2015-11-15 11:40:09

不透明度的聲明是由父母繼承即使聲明明確

回答

相關問題