我们希望在网页上创建一条水平线(使用hr
或只是一些带背景的元素),并且在中心我们应该有一个图像。
像这样的东西:
--------------- &&&& ------------
该图像在某些部分是,并且必须是透明的。 (轮廓应始终可见,透明部分应通过javascript填充另一个图像,使其充当预加载器。)
我们将创建一个容器div,其中一些图像在x上重复,并将图像置于居中位置,但如果我们这样做,即使它们位于图像下方,由于图像上存在透明度,这些线条也是可见的。
我认为居中的图像不能是背景图像,因为我们应该用javascript来定位它。 (我可能错了面团。)
为了解决这个问题,你能提出什么建议?
此外,图像边缘和线之间不应存在空白区域。
--------&&&-------
尝试失败:在手机上编码:s
如何进行调整以始终采用整个视口宽度? http://jsfiddle.net/j4eH8/3/
更新: 这可能是一种正确的做法吗?还是有任何缺点?
感谢
答案 0 :(得分:2)
难道你不能在Photoshop中制作具有所需线条和所有规格的图像。 <hr><img src="SRC"><hr>
之类的东西不起作用,因为它会分成两行(see this fiddle)。
编辑:根据你更新的小提琴,你明白了。就更好的方法而言,我认为你的方式可行,尽管你想在移动设备上测试它或缩小浏览器来测试它的响应性。
当我测试它在小提琴上的响应性时,它似乎在一个较小的浏览器中工作,虽然它变得太小(约40像素)时会中断;然而,没有屏幕那么小,它会破碎。
长话短说,请使用你发布的小提琴。 http://jsfiddle.net/j4eH8/4/