在图像上设置不透明度会导致重叠元素的盒阴影消失

Question

下面的CSS,施加到一个<a>与一个<div>驻留在个人<tr>▶ <td>在一个元件<table>(与border-collapse和td { padding: 0px; }设定)时,按预期方式工作:

a {
    background-image: url("http://ibin.co/19rwR69EOigr");
    height: 100px;
    width: 120px;
    display: block;
}
div {
    width: 200px;
    box-shadow: #000 0px 0px 13px;
}

如果我对它应用任何不透明度<a>,浏览器的内部分层似乎可怕地破坏.

请注意,即使在第一个示例中,测试图片的最后一个像素也位于<div>s 内box-shadow.(它说opacity = ".99",如果你在图像中看不到它.>.)

这可能是一个渲染错误,已成功蔓延到Firefox 和 Chrome？:P

看看这个JSFiddle打开和关闭的内容.

提前致谢!

Answer 1

非常简单.

谢谢你干净的格式.

改变opaque ID这样的:

#opaque {
    opacity: .99;
    z-index:-10;
    position:relative;
}

http://jsfiddle.net/SinisterSystems/GbAYU/3/

发生的事情是无论什么时候opacity设置,CSS3的后端方法来解释它会抛出一些非常狂野 z-index的东西.

只需将其设置为堆叠在其他元素后面,所有这些都可以正常工作.

position:relative;- 否则它将不接受您的z-index财产.

z-index:-10;- 因此它将它置于其他对象z-index的0之后.

编辑:

HTML元素的默认值不支持static作为z-index将应用的对象,因此position声明.

而且它完全不会有absolute,fixed,relative,或inherit,但不是static.