風格元素的不透明度，而不造型子元素

我有一個<div>標籤，我標記爲opacity: 0.5;。在<div>標籤中，我有一個，我不想擁有50％的不透明度。我想知道是否有任何方式來設計<div>元素，並排除<div>元素內的元素。風格元素的不透明度，而不造型子元素

來源

2014-08-31 Seth Taddiken

爲什麼你想'不透明度'爲'0.5'？背景？除了'iframe'，解決方案設置了子元素的不透明度。 – dashtinejad 2014-08-31 05:11:07

[設置背景圖像的不透明度而不影響子元素]的可能的副本（http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements） – 2014-08-31 05:58:31

不透明度是沒有繼承，但是因爲父項具有不透明性，適用於其中的所有內容。 您不能使子元素的透明度比父少。因此：

將opacity設置爲子元素，但iframe除外。
如果您在父項中有一些透明背景，請使用rgba或透明png。

來源

2014-08-31 05:17:00 dashtinejad

這裏是jsFiddle展示了上面提到的rgba。 http://jsfiddle.net/z85fgupu/注意，由於rgba（）的a或alpha設置，黑色背景是0.5不透明度（） – 2014-08-31 05:26:49

那麼，如何添加與其他元素相同的背景顏色（50％不透明度） iframe（它有一個邊框）？編輯：沒有意識到，如果我使用rgba它不會影響iframe嗎？ – 2014-08-31 05:30:52

http://jsfiddle.net/z85fgupu/ – 2014-08-31 05:36:59

由於@ROX聲明你不能。在我看來，設置其他子元素的不透明度可能是不錯的選擇。試試這個：

.your_div *:not(iframe) { 
    opacity: 0.5; 
}

另一種選擇是使用包裝與relative位置，並與包裝內absolute位置的所有其他元素。 JSFiddle

來源

2014-08-31 05:34:12

這似乎不適用於我，我早些時候嘗試過，但謝謝！ – 2014-08-31 05:43:05

@SethTaddiken我已經添加了另一個選項，請參閱 – 2014-08-31 05:51:50

謝謝，這將工作，但個人而言，我寧願使用rgba值作爲背景顏色。 – 2014-08-31 05:54:45

風格元素的不透明度，而不造型子元素

回答

相關問題