如何避免放置在不透明DIV中的img不透明？

我有一個CSS風格的背景顏色和不透明度爲0.7的DIV。完美的作品。但是...在DIV標籤裏面有一個IMG標籤。我的問題是，IMG獲得了與DIV相同的不透明度，這是我不想要的。我希望IMG不透明，並嘗試設置「不透明：1！重要」; IMG，但它仍然是半透明的DIV。如何避免放置在不透明DIV中的img不透明？

任何人都可以幫忙嗎？

來源

2012-04-13 rassom

嗨，你可以看到這個http://stackoverflow.com/questions/10005047/can-a-child-div-have-a-higher-opacity-比父母與Css/10005347＃10005347 – 2012-04-13 10:29:34

謝謝azad :) – rassom 2012-04-13 11:59:56

你不能使用不透明度來做到這一點，因爲它總是影響所有子元素。您可以嘗試使用rgba-color作爲您的div的背景替代（all modern browsers支持）並省略不透明度。

background: rgba(0, 0, 255, 0.7); // 70% opaque blue

來源

2012-04-13 10:30:59 oezi

也有rgba漸變過濾器IE6-9，可能需要一些修補，但它的作品。更多信息在這裏：http://css-tricks.com/rgba-browser-support/ – Ege 2012-04-13 10:43:12

我想你不能阻止發生這種情況。你可能不得不在div外面用img，並且在那裏有一些混亂的位置：絕對的; CSS。它不乾淨，但無論工程。我更喜歡oezi的解決方案，但這可能與您想要做的不兼容。如果它是，你應該定義與oezi的解決方案。

<div> 
    <img src="" alt=""> 
    <div style="position: absolute;"> 
    Content 
    </div> 
</div>

來源

2012-04-13 10:33:50

我與oezi的解決方案。非常感謝您回答。欣賞它:) – rassom 2012-04-13 11:58:12

嗨我提到的屬性，你可以增加和減少父容器背景的不透明度，並且不會影響子容器。這很簡單，看到CSS基本上你必須在背景&阿爾法用於不透明的RGB顏色。

background:rgba(146,146,146,0.1);

或看到的例子： - http://jsfiddle.net/8LFLd/20/

來源

2012-04-13 10:43:21

我以上oezi的解決方案，基本上與您的解決方案相同。非常感謝您回答。欣賞它:) – rassom 2012-04-13 11:58:59

如何避免放置在不透明DIV中的img不透明？

回答

相關問題