-1

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

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

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

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

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

你能提出什么建议来实现这一目标？

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

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

失败的尝试：-在电话上编码：s

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

我怎样才能使它调整为始终占据整个视口宽度？ http://jsfiddle.net/j4eH8/3/

更新：这可能是一种正确的做法吗？或者有什么缺点吗？

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

谢谢

4

1 回答 1

2

您不能在 Photoshop 中制作具有您想要的线条和所有规格的图像。像<hr><img src="SRC"><hr>这样的东西不起作用，因为它会分成两行（见this fiddle）。

编辑：根据你更新的小提琴，你想通了。就执行此操作的更好方法而言，我认为您的方法会奏效，尽管您希望在移动设备或缩小的浏览器上对其进行测试以测试其响应能力。
当我在小提琴上测试它的响应能力时，它似乎可以在较小的浏览器中工作，尽管当它变得太小（大约 40 像素）时它会中断；但是，没有屏幕小到会坏。
长话短说，使用您发布的小提琴。http://jsfiddle.net/j4eH8/4/

于 2013-07-18T00:25:36.593 回答