我正在尝试创建一个界面,让您可以显示和隐藏同一图像的图层。我有一组 png 图像,我希望它们都占据相同的空间,并简单地显示和隐藏每一层所代表的 div。
当我使用绝对位置和 z 顺序时,我仍然看到图像以不正确的顺序呈现。
<img src="a.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:-1" />
<img src="b.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:1"/>
<img src="c.png" style="position:abslute;left:0px;top:0px;width:300px;z-order:1" />
在此示例中,图像似乎总是掩盖图像 b。 (至少在 Chrome 上)
可能是图片加载速度的问题?
这可以完成吗?还是有问题的设计,我应该在服务器上合成图像并将新图像发送到客户端?
谢谢!
最佳答案
我认为问题在于您正在定义 z-order
而不是 z-index
此外,要使该技术发挥作用,z-index 应该彼此不同。
关于css - 在 CSS 中分层图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4543874/