以下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.
提前致谢!
解决方法
非常简单.
谢谢你干净的格式.
将不透明ID更改为:
#opaque { opacity: .99; z-index:-10; position:relative; }
http://jsfiddle.net/SinisterSystems/GbAYU/3/
发生什么事情是透明度设置,CSS3的后端方法来解释它会抛出一些很漂亮的z-index.
只需将其设置为堆叠在其他元素后面,所有这些将为您正常工作.
位置:相对; – 因为否则它不会接受你的z-index属性.
的z-index:-10; – 所以它将它放在你的其他对象的0的z-index之后.
编辑:
HTML元素的默认值不支持静态作为z-index将应用的对象,因此位置声明.
它完全与绝对,固定,相对或继承,但不是静态的.