Question

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

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

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

两个重复的图像是不同的，它们也不是可以定位在哪里的标准背景图像。相反，左侧图像需要锚定/粘贴到横幅图像的左侧，然后在浏览器窗口展开时从该点向左重复。同样，右图像需要锚定/粘贴在横幅图像的右侧，并从该点向右重复。

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

任何有助于达到预期效果的帮助都将受到赞赏。

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％的填充来完成。左边是＆＃34;填充框＆＃34;右边是＆＃34;内容框＆＃34;。

您可能希望将第一个背景设为<img>，这样您就可以为其添加标题标记 - 如果您这样做，那么它只会出现在窗口右侧50％的位置，这样您和＆＃39} ＃39;我必须左对齐并使用position:relative; left:-250px将其重新放回中间。

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

Answer 2

您能提供检查网站的网址吗？听起来你需要尝试使用css属性：

background-position {x, y}

Answer 3

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

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

锚定CSS重复背景图像

3 个答案: