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

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的{​​{1}}内。 （并说它opacity = ".99"，如果你在图片中看不到它＆gt;。＆gt;）

这可能是一个渲染错误，可以进入Firefox 和 Chrome吗？ ：P

See what opens and shuts in this 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; - 这样它就会将其置于其他对象的 0 的z-index之后。

---

编辑：

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

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