在大多數瀏覽器中,當html元素只是部分不透明時,其子元素「繼承」這種不透明性。 (這不完全是繼承 - 更準確地說,整個圖像是組裝的,包括父類和它的孩子遞歸地,然後不透明度適用於整個事情。)有沒有什麼辦法讓不透明度適用於ie8中絕對定位的子元素
在IE8中(我也會假設對於早期版本的IE),這並不總是發生在不透明的情況下。如果子元素具有position:static(如果沒有指定位置,則默認爲default),那麼它的確如上所述工作。然而,似乎是這樣的,如果位置被設置爲其他任何東西(例如,絕對的或相對的),那麼子元素是完全不透明的。
我想知道如何使不透明度正確影響父元素和子元素,但仍然保持子元素的位置:絕對;
這是一個問題的例子。下面的代碼應該是在一個垂直的紅色條的頂部製作一個半透明的灰色方框,並帶有半透明的藍色周邊區域。在Firefox,Chrome等中,這是實際看到的。在IE8上,藍色框是正確半透明的,但灰色部分是不透明的。
<!doctype html>
<html>
<head>
<style>
div.parentElem
{
background-color:#0000ff;
position: absolute;
left:75px;
top:75px;
width:300px;
height:225px;
opacity:0.5;
filter:alpha(opacity=50);
}
div.childElem
{
background-color:#808080;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
div.redBar
{
position: absolute;
left:150px;
top:50px;
height:350px;
width:25px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="redBar"></div>
<div class="parentElem">
<div class="childElem"></div>
</div>
</body>
</html>
顯然,這只是一個玩具的例子 - 我可以有藍色邊框和灰色背景上以達到預期的效果單一的股利。在真實場景中,我將多個不同的div分層,每個div都有一個PNG背景圖像來動態構建圖像。
我第一次嘗試的解決方法是通過將子項上的過濾器設置爲alpha(opacity = 50),將透明度應用於父級和子級;或者簡單地設置filter:inherit ;.這並沒有達到預期的效果,因爲它使半透明的藍色矩形在其上方具有半透明的灰色矩形。中間的空白空間最終呈半透明的藍灰色,而它應該是半透明的灰色。同樣,它不能使元素的兄弟姐妹。任何解決方案都需要在對任何內容應用任何透明度之前合成這兩個圖像。
在我的研究中,我發現了一些建議,應用zoom:1;或浮動:無;到內部元素可能會解決問題,但都不適合我。
我最終的解決方法是給子元素的位置:static。這是一種醜陋的解決方案,但我會做什麼將它應用到上面的例子是改變子元素的風格看起來像:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
}
這是一種醜陋的解決方案,因爲這意味着我有知道物體的高度。另外,在我編寫幾個不同的png的真實案例中,我希望它們是合乎邏輯的兄弟姐妹,我必須將它們全部放在嵌套的父 - 子 - 孫 - 孫等中。關係。它還阻止我添加除堆棧頂部(最裏面的div)之外的任何文本元素,而不會搞亂定位。它確實有效,但在所有瀏覽器中看起來都一樣。
有什麼辦法可以避免這種可怕的解決方法,並且讓不透明度正確地影響子元素而不使位置靜態?謝謝!
根據我的研究得出的最佳結論是,您絕對不能在IE8(和Ie <8)中正確地繼承不透明度,並使用絕對定位的元素。 – mikepr 2011-06-28 20:12:50