html - 锚定 CSS 重复背景图片

Question

我有一个带有以下配置的标题横幅的网页:

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

该页面设计有固定宽度的内容，但横幅横跨浏览器窗口的整个宽度(因此在左侧和右侧包含重复图像的原因)。

这两张重复的图片是不同的，它们也不是可以随意放置的标准背景图片。相反，左侧图像需要锚定/固定在横幅图像的左侧，然后随着浏览器窗口的展开，从该点开始向左重复。同样，正确的图像需要锚定/粘贴到横幅图像的右侧，并从该点向右重复。

使用带有 repeat-x 设置的纯 background-image: 属性不起作用，因为图像将从左侧重复/平铺浏览器窗口，而不是从横幅图像的左侧/右侧向外按所需方向。

任何有助于实现预期效果的帮助都将不胜感激。

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% 的填充来完成。左边是“padding box”，右边是“content box”。

您可能希望将第一个背景设为 <img>所以你可以给它一个标题标签 - 如果你这样做那么它只会出现在窗口的右侧 50% 所以你必须左对齐它并使用 position:relative; left:-250px让它回到中间。

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