锚定CSS重复背景图片

Question

我有一个网页，其中有一个顶部横幅，它的配置如下：

<---Repeating Image Left--><---Banner Image---><---Repeating Image Right--->

该页面的设计是固定宽度内容，但横幅跨越整个浏览器窗口宽度（因此需要在左右边缘包含重复图像）。这两个重复图像不同，并且它们也不是标准的背景图像，无法随意定位。相反，左侧图像需要锚定/粘贴到横幅图像的左侧，并在从该点开始扩展浏览器窗口时向左重复。同样，右侧图像需要锚定/粘贴到横幅图像的右侧，并从那一点向右重复。

使用纯粹的 "background-image:" 属性并设置 "repeat-x" 是行不通的，因为该图像将从浏览器窗口的左侧而不是从横幅图像的左/右侧向外重复/平铺，达不到期望的效果。

希望能够提供任何帮助来实现所需的效果。

- Skoota

---

你能发布一下结果图片吗？ - Rohit Azad Malik

谢谢您的回复。不幸的是，我无法发布这些图片，因为它们是为一个尚未上线的项目而准备的。 - Skoota

Answer 1

你可以通过一个单独的样式元素来实现这个，是的：

#banner {
  height: 50px;
  width: 50%; margin: 0; padding-right: 50%;
  background-image:url('banner.png'), url('left-bg.png'), url('right-bg.png');
  background-clip: padding-box, content-box, content-box;  
  -webkit-background-clip: padding-box, content-box, padding-box; 
  background-origin: padding-box, content-box, padding-box;
  background-position: center, right, center;
  background-repeat: no-repeat, repeat-x, repeat-x;
}

该元素有三个背景。诀窍在于让左右两侧出现不同的背景，我通过在左侧添加50%的填充来实现这一点。左侧是“填充框”，右侧是“内容框”。

您可能希望将第一个背景设置为 <img>，以便可以给它添加标题标签--如果这样做，则它仅会出现在窗口的右侧50％，因此您需要左对齐它并使用position:relative; left:-250px将其移回中间。

最后，背景图像锁定在窗口的中间，而不是横幅的边缘，但您可以通过更改图像本身来解决这个问题。

- Andrew Taylor

---

提醒一下，我试了一下，你不小心把background-clip的第三个选项设置为了“内容(content)”，而不是“内边距(padding)”。我还根据以上更正创建了一个jsfiddle的示例。但是回答得很好。发布一个Fiddle总是不错的，这样提问者就可以查看它，而你也可以捕捉错误 ;) - Fewfre

谢谢您的答案-几乎完全符合我的需求。然而，最后一个问题是背景图像的锁定。您提到"背景图像与窗口中央锁定，而不是横幅边缘，但您可以通过更改图像本身来解决这个问题。"我不确定您对如何修改图像的意思-能否详细说明一下？谢谢！ - Skoota

我的意思是，如果中间的图像宽度为250像素，则左侧的图像锁定在其边缘的右侧125像素，如果图像宽度为50像素，则实际上偏移了25像素。如果您设计图像使中心而不是边缘与横幅对齐，则没有人会注意到这一点。 - Andrew Taylor

Answer 2

你能提供一个检查网站的URL吗？听起来你需要尝试一下CSS属性：

background-position {x, y}

- nfrost21

---

感谢您的回复。根据我上面的评论，该网站尚未上线，因为它仍在开发中，尚未准备好发布。 - Skoota

Answer 3

banner
{
background-image:url('image.gif');
background-repeat:repeat-x;
vertical-align: middle;
text-align: center; /*optional*/
}

我不知道这是否有效，但值得一试。

- Kees Sonnema