如何從父css屬性中排除子項？

我正在使用css處理元素的不透明度。一個段落是在一個div中，但是當我將div的不透明度設置爲0.4時，段落也會受到影響。我試圖通過忽略不透明度1.0而忽略段落中的div。我該如何解決這個問題？如何從父css屬性中排除子項？

來源

2012-12-22 dramasea

簡短的回答是，你不能。這就是不透明度的工作原理。

較長的答案取決於你實際嘗試達到什麼（舊的XY問題）。

例如，如果您希望div的背景是半透明的，但不是該段落，那麼您可以通過使用半透明背景而不是使整個div變爲半透明來解決該問題。

來源

2012-12-22 11:10:34 Quentin

其他屬性如顏色怎麼樣？有無論如何我可以選擇父元素並排除子元素。例如，我只希望div中的文本是紅色的，但不在div的子項的段落中 – dramasea

如果某個屬性被繼承（默認情況下，該顏色），那麼您只能編寫與該段落相匹配的選擇器並明確地給它一個不同的顏色。沒有辦法說「從祖父母繼承」。 – Quentin

我知道解決這個問題的唯一方法是背景與內容分開：

<div id="container" style="position: relative;"> 
    <div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;">&nbsp;</div> 
    <div id="content">Your content here</div> 
</div>

來源

2012-12-22 11:12:44

我已經做了這點。如果我沒有記錯，我將position:absolute;設置爲innerDiv，因此不透明屬性效果很好。

實現這種效果的另一種方法是使用alpha而不是opacity設置outerDiv的背景; 對於例如：變化

.outerDiv{ 
    background-color: white; //or #fff or rgb(255,255,255) 
    opacity: 0.4; 
}

到

.outerDiv{ 
    background-color: rgba(225,225,225,0.4); 
}

第四值是工作方式類似的不透明度的alpha。它不會打擾div的內容。

來源

2012-12-22 11:42:12 5hahiL

如何從父css屬性中排除子項？

回答

相關問題