4

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

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

4

3 回答 3

6

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

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

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

于 2012-03-11T18:10:11.077 回答
1

除了 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/

于 2012-03-11T18:22:50.057 回答
0

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

于 2012-03-11T18:17:33.243 回答