css – 在图像上设置不透明度会导致重叠元素的box-shadow消失

前端之家收集整理的这篇文章主要介绍了css – 在图像上设置不透明度会导致重叠元素的box-shadow消失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下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将应用的对象,因此位置声明.

它完全与绝对,固定,相对或继承,但不是静态的.

原文链接:https://www.f2er.com/css/216367.html

猜你在找的CSS相关文章