Question

以前有人遇到过CSS这类问题吗？

我的标题设置为100％宽度，左侧是图像（500px宽）。我有一个背景图像，我想为水平剩余的空间填写，但不是图像的位置。因此，我设置background-position: 500px 0;并假设背景从距离浏览器左侧500px的距离开始。但事实并非如此。它只适用于我将repeat-property设置为background-repeat: no-repeat;我花了1.5个小时试图找到一个没有运气的解决方案，并最终通过在标题中添加margin-left: 500px;来解决这个问题500px边距 - 图像左侧。我在这里错过了什么吗？为什么我不能告诉我的背景从x坐标500开始水平平铺？

Answer 1

我在这里遗漏了什么吗？为什么我不能告诉我的背景从x坐标500开始水平平铺？

background-position未设置向右或向下重复的背景原点。它只是将整个背景分别沿x轴和y轴移动一定距离。

当您指定沿轴重复的背景时，它始终沿着该轴在两个方向上无限制地平铺（即沿水平轴向左和向右，沿垂直轴向上和向下）。您将无法使用CSS的背景属性更改此内容。

Answer 2

除了Bolt锁定答案，您可以通过在内部放置一个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/

Answer 3

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

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

3 个答案: