3

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

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

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

这两个重复的图像是不同的，它们也不是可以放置在任何地方的标准背景图像。相反，左侧图像需要锚定/固定在横幅图像的左侧，然后随着浏览器窗口的展开，从该点向左重复。同样，右侧图像需要锚定/固定在横幅图像的右侧，并从该点向右重复。

对集合使用 purebackground-image:属性repeat-x不起作用，因为图像将从浏览器窗口的左侧重复/平铺，而不是从横幅图像的左侧/右侧沿所需方向向外重复/平铺。

任何有助于达到预期效果的帮助将不胜感激。

4

3 回答 3

2

您可以使用单个样式元素执行此操作，是的：

#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% 的填充来完成。左侧是“填充框”，右侧是“内容框”。

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

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

于 2012-06-29T12:44:22.747 回答
0

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

background-position {x, y}
于 2012-06-29T11:37:57.510 回答
-1 
banner
{
background-image:url('image.gif');
background-repeat:repeat-x;
vertical-align: middle;
text-align: center; /*optional*/
}

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

于 2012-06-29T11:48:18.160 回答