我们希望在网页上制作一条水平线(使用 hr 或只是一些具有背景的元素)，并且在中心我们应该有一个图像。
像这样:
--------------- &&&& ------------
该图像在某些部分是并且必须是透明的。 (轮廓应该始终可见，透明部分应该通过 javascript 填充另一个图像，使其充当预加载器)。
我们将创建一个容器 div，其中一些图像在 x 上重复，并将图像居中放置，但如果我们这样做，由于图像上存在透明度，即使它们位于图像下方，线条也会可见。
我认为居中图像不能是背景图像，因为我们应该使用 javascript 来定位它。 (我可能是错误的面团)。
为了实现这一目标，您有什么建议？
此外，图像边缘和线条之间不应存在空白。
--------&&&-------
失败的尝试:-在手机上编码:s
我怎样才能调整它以始终占据整个视口(viewport)宽度？ http://jsfiddle.net/j4eH8/3/
更新: 这是做这件事的正确方法吗？或者有什么缺点吗？
谢谢
最佳答案
您不能只在 Photoshop 中制作一张包含您想要的线条和所有规范的图像吗？类似于 <hr><img src="SRC"><hr>不会工作，因为它会分成两行 ( see this fiddle )。
编辑:根据您更新的 fiddle ，您明白了。就更好的方法而言，我认为你的方法会起作用，尽管你想在移动设备或缩小的浏览器上测试它以测试它的响应能力。
当我在 fiddle 上测试它的响应能力时，它似乎可以在较小的浏览器中运行，尽管当它变得太小时(大约 40 像素)时它会中断；但是，没有屏幕小到会破裂的程度。
长话短说，使用您发布的 fiddle 。 http://jsfiddle.net/j4eH8/4/
关于css - 如何将半透明图像居中放置在水平线上，而不让图像下方出现线条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17712457/