CSS：图像背景 - 如何防止它？

我有以下情况：CSS：图像背景 - 如何防止它？

<html> 
    <head> 
    <title> 
     Title 
    </title> 
    <style type="text/css"> 
     #wrapper { 
     width: 100%; 
     } 

     #thingy { 
     position: absolute; 
     top: 20px; 
     background-image: url("bg.png"); 
     width: 100%; 
     height: 4px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <img src="test.png" alt=""/> 
     <div id="thingy">&nbsp;</div> 
    </div> 
    </body> 
</html>

test.png是相同的图像，bg.png是1×4的背景图像。

问题是：元素#thingy显示在图像的前面，所以一行直接穿过图像。这不应该发生，应该在图像后面显示#thingy。玩Z指数不会做任何事情...

任何提示？

感谢，约斯特

编辑：更多的细节：我们的目标是获得一个标题横幅（test.png以上），其下设一个水平线。该行必须跨越标题区域的整个宽度（因此宽度：100％），横幅必须保持居中。

来源

2012-03-27 Jost

这发生在Chrome和Firefox中，所以我想这不是一个浏览器的具体问题。 – Jost 2012-03-27 19:34:13

为图片提供完全合格的网址（http：//“），以便我们可以进行测试 – 2012-03-27 19:36:23

在图像上声明position: relative并给它一个z-index可以纠正行为。请看下图：

#thingy { 
    position: absolute; 
    top: 50px; 
    background-image: url("bg.png"); 
    width: 100%; 
    height: 4px; 
    z-index: 1; 
} 

#wrapper img { 
    position: relative; 
    z-index: 2500; 
}

来源

2012-03-27 19:39:48

肯定“thingy”显示在图像的前面，因为它具有绝对位置。 z-index在这种情况下无法提供帮助，因为图像的位置是静态的，z-index对它没有影响。

我不知道你试图达到什么目标，但是当你将图像定位到绝对位置时，z-index也会起作用。

编辑：编辑到你的问题现在有点更清晰你想要什么。你为什么不把当前的背景图像放在你的包装的东西和背景图像中？如果需要定位到背景位置。然后你将你的图像置于包装中，你就完成了。你需要“thingy”div在你的情况下没有任何东西。

来源

2012-03-27 19:38:53

定位图片相对也会改正行为 – 2012-03-27 19:41:05

没错，处理这个问题有不同的可能性，而且我很确定根本不会有任何需要的位置，如果约斯特会解释他想要做什么。 – 2012-03-27 19:44:03

同意，这个问题对细节有些模糊。 – 2012-03-27 19:44:50

应用的z-index和位置设置为图像：

#wrapper img { 
    z-index: 100; 
    position: relative; 
} 

#thingy { 
    z-index: 99; 
}

来源

2012-03-27 19:42:32

我认为你正在寻找这一点;

http://jsfiddle.net/mtariq/xmYpq/

来源

2012-03-27 19:49:30

CSS：图像背景 - 如何防止它？

回答

相关问题