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

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> 内。的 box-shadow ，即使在第一个例子中。 (它说 opacity = ".99"，如果您在图像中看不到它 >.>)

这可能是 Firefox 和 Chrome 中的渲染错误吗？ :P

See what opens and shuts in this JSFiddle .

提前致谢!

Answer 1

非常简单。

感谢您干净的格式。

将不透明 ID 更改为:

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

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

---

发生的事情是每当 opacity 被设置时，CSS3 的后端方法解释它会抛出一些相当wild z-index 的。

只需将其设置为堆叠在其他元素的后面，所有元素都可以正常工作。

position:relative; - 否则它不会接受您的 z-index 属性。

z-index:-10; - 以便将其置于 0 其他对象的 z-index 之后。

---

编辑:

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

它完全适用于 absolute、fixed、relative 或 inherit，但不是静态。