锚定CSS重复背景图象 [英] Anchoring CSS Repeating Background Image

问题描述

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

I have a webpage with a header banner in the following configuration:

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

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

The page is designed with fixed width content, but the banner spans the entire width of the browser window (thus the reason for including repeating images on the left and right).

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

The two repeating images are different and they are also not standard background images which can be positioned where-ever. Instead, the left image needs to be anchored/stuck to the left-hand side of the banner image and then repeat itself leftwards, from that point, as the browser window is expanded. Likewise, the right image needs to be anchored/stuck to the right-hand side of the banner image and repeat itself rightwards from that point.

使用纯 background-image：属性与 repeat-x 设置不起作用，因为图像将从左侧重复/

Using the pure background-image: property with the repeat-x set does not work, as the image will be repeated/tiled from the left-hand side of the browser window, rather than from the left/right hand side of the banner image outwards in the desired direction.

任何有助于实现所需效果的任何帮助将是：在浏览器窗口的右侧，而不是从横幅图像的左侧/右侧，

Any help to achieve the desired effect would be appreciated.

推荐答案

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

You can do this with a single styled element, yes:

#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％的填充。左侧是填充框，右侧是内容框。

The element has three backgrounds. The trick is in getting different ones to appear on the left and right, which I've done by adding 50% padding on the left. The left hand side is "padding box" and the right is "content box".

您可能想让第一个背景为 img> ，所以你可以给它一个标题标签 - 如果你这样做，它将只出现在窗口的右手50％，所以你必须左对齐它，并使用 position：relative;

You might want to make the first background an <img> so you can give it a title tag -- if you do then it'll appear only in the right-hand 50% of the window so you'll have to left align it and use position:relative; left:-250px to get it back into the middle.

最后，背景图片被锁定在窗口的中间，而不是在窗口的中间。横幅的边缘，但你可以通过更改图像本身来修复它。

Lastly, the background images are locked to the middle of the window, not the edge of the banner, but you can fix that by changing the images themselves.

这篇关于锚定CSS重复背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！