如何将半透明图像置于水平线上，而不让图像下方的线条出现？

Question

我们希望在网页上创建一条水平线（使用hr或只是一些带背景的元素），并且在中心我们应该有一个图像。 像这样的东西：

--------------- &&&& ------------

该图像在某些部分是，并且必须是透明的。 （轮廓应始终可见，透明部分应通过javascript填充另一个图像，使其充当预加载器。）

我们将创建一个容器div，其中一些图像在x上重复，并将图像置于居中位置，但如果我们这样做，即使它们位于图像下方，由于图像上存在透明度，这些线条也是可见的。

我认为居中的图像不能是背景图像，因为我们应该用javascript来定位它。 （我可能错了面团。）

为了解决这个问题，你能提出什么建议？

此外，图像边缘和线之间不应存在空白区域。

--------&&&-------

尝试失败：在手机上编码：s

http://jsfiddle.net/j4eH8/1/

如何进行调整以始终采用整个视口宽度？ http://jsfiddle.net/j4eH8/3/

更新： 这可能是一种正确的做法吗？还是有任何缺点？

http://jsfiddle.net/j4eH8/4/

感谢

Answer 1

难道你不能在Photoshop中制作具有所需线条和所有规格的图像。 <hr><img src="SRC"><hr>之类的东西不起作用，因为它会分成两行（see this fiddle）。

编辑：根据你更新的小提琴，你明白了。就更好的方法而言，我认为你的方式可行，尽管你想在移动设备上测试它或缩小浏览器来测试它的响应性。
当我测试它在小提琴上的响应性时，它似乎在一个较小的浏览器中工作，虽然它变得太小（约40像素）时会中断;然而，没有屏幕那么小，它会破碎。
长话短说，请使用你发布的小提琴。 http://jsfiddle.net/j4eH8/4/