在大多数浏览器中,当html元素仅部分不透明时,其子元素"继承"此不透明度.(这是不太继承 - 更准确,图像整体组装,其中包括母公司及其子递归,然后将不透明度应用于整个事情.)
在IE8中(我也假设IE的早期版本),这并不总是与不透明度有关.如果子元素的位置为:static(默认情况下,如果没有指定位置),那么它就像我上面描述的那样工作.但是,似乎情况是,如果将位置设置为其他任何内容(例如,绝对或相对),则子元素是完全不透明的.
我想知道如何使不透明度正确地影响父元素和子元素,但仍然保持子元素的位置:绝对;
这是一个问题的例子.下面的代码应该是一个半透明的灰色框,在一个垂直的红色条顶部有一个半透明的蓝色周围区域.在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,每个div都有一个png背景图像来动态构建图像.
我的第一个尝试的解决方法是通过将子项上的过滤器设置为alpha(opacity = 50)来对父项和子项应用不透明度; 或者只是设置过滤器:inherit;.这不能达到预期的效果,因为它在它上面形成一个半透明的灰色矩形的半透明蓝色矩形.中间的空白区域最终是半透明的蓝色灰色,而它应该是半透明的灰色.同样,它不能使元素兄弟姐妹.在对任何事物应用任何透明度之前,任何解决方案都需要组合两个图像.
在我的研究中,我发现了一些建议,即应用zoom:1; 或者浮动:无; 内部元素可能会解决问题,但对我来说都没有用.
我最终的解决方法是给子元素位置:static.这是一种丑陋的解决方案,但是我要将它应用于上面的示例是将子元素的样式更改为:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
} …