CSS：背景位置+重复=不起作用

Question

有人在CSS中遇到过这种问题吗？

我有一个头部，宽度设置为100％，左侧有一张图片（宽度为500像素）。我有一个背景图像，想要填充剩余的水平空间，但不包括图片。因此，我设置了background-position: 500px 0;，并假设背景从浏览器左侧500像素处开始。但它没有起作用。只有当我将重复属性设置为background-repeat: no-repeat;时才有效。我花了1.5个小时试图找到解决方案，最终通过向标题添加margin-left: 500px;和向图像添加负500像素的margin-left来解决了这个问题。我错过了什么吗？为什么我不能告诉我的背景从x坐标500开始水平平铺？

- Rabu

---

如果某个答案对您有用，您应该将其标记为已接受的答案。帮助 Stack Overflow 社区。 - Cthulhu

Answer 1

我有点不明白，为什么我不能让我的背景从 x 坐标 500 开始水平平铺呢？ background-position 并没有设置背景的起点以便向右或向下重复。它只是将整个背景沿着 x 和 y 轴分别移动一定距离。

当您指定一个要在轴上重复的背景时，它总是无限地沿着该轴的两个方向（即水平轴上左右，垂直轴上上下）平铺。您无法使用 CSS 的背景属性来改变这一点。

- BoltClock

---

很高兴为您服务。您可以通过点击左侧的复选标记来标记接受的答案。欢迎来到SO！ - BoltClock

Answer 2

除了BoltClock的答案之外，您还可以通过在内部放置一个div来模拟这个背景

HTML：

<div id="repeater">
    <div id="repeater-offset"></div> 
</div>

CSS：

#repeater {
    background-image:url('http://lorempixel.com/400/200');
    background-position: 100px 0;
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}

#repeater-offset {
    background-color:#fff;
    position:relative;
    width:100px;
    height:100%;
}

请查看示例： http://jsfiddle.net/NmxrK/1/

- Ortiga

Answer 3

在左侧的图像旁边，在标题内创建第二个 div。您可以通过多种方式实现此目标，例如使用 float: right 或绝对定位和 margin-left: 500px; 在此第二个 div 中设置重复的背景，并确保高度和宽度均为 100%。您还可以在标题中设置 overflow:hidden，以避免出现滚动条。

- Aram Kocharyan