Question

看看the fiddle。

background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
background-repeat: no-repeat;
background-position: 75% 0, 50% 0, 25% 0, 0 0;
width: 400px;

元素宽400像素，背景图像宽100像素。每个背景图像位置间隔为25％，因此我希望每100px渲染一次背景图像，但事实并非如此。

有人对此有所了解吗？我想我错过了一些基本的东西。

Answer 1

解决方案

您必须对background-position

使用以下设置

background-position: 100% 0, 33.33% 0, 66.67% 0, 0 0;

＆＃13;

.background-image {
  background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
  background-repeat: no-repeat;
  background-position: 100% 0, 66.67% 0, 33.33% 0, 0 0;
  width: 400px;
  height: 20px
}
.background-color {
  background: linear-gradient(to right, black 0%, black 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
  width: 400px;
  height: 20px;
}

＆＃13;

100px x 20px = http://www.gtsalive.com/images/partners/pizzahut.jpg
<br>
<br>
<div class="background-image"></div>
<div class="background-color"></div>

＆＃13;

计算逻辑

基本上，当我们有多个图像且所有图像大小相同时，逻辑变为类似下面的内容：

对于图像的水平放置：
- 位置X的百分比= 100％*（图像编号 - 1）/（图像总数 - 1）
垂直放置图像：
- 位置Y百分比= 100％*（图像编号 - 1）/（图像总数 - 1）

推理

这是因为当为background-position提供百分比值时，用户代理会尝试匹配与背景图像中的百分比值对应的点以及相应的点（由相同的百分比值指定）。具有背景图像的元素。

引用 W3C Spec：

百分比X将图像的X％对齐（对于水平）或向下（对于垂直）对齐点X％（对于水平）或向下（对于垂直）对齐元素的填充框。例如，如果值为＆＃39; 0％0％＆＃39;，则图像的左上角与填充框的左上角对齐。价值对为'100％100％＆＃39;将图像的右下角放在填充框的右下角。如果价值对为“14％84％”，那么图像上的14％和84％的点将被放置在14％的点和填充框的84％处。

指出要点

以上行为仅适用于基于百分比的定位。基于像素的定位按照正常预期工作。也就是说，以下设置可以完美地运行：

background-position: 300px 0, 200px 0, 100px 0, 0px 0;

＆＃13;

.background-image {
  background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
  background-repeat: no-repeat;
  background-position: 300px 0, 200px 0, 100px 0, 0px 0;
  width: 400px;
  height: 20px
}
.background-color {
  background: linear-gradient(to right, black 0%, black 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
  width: 400px;
  height: 20px;
}

＆＃13;

100px x 20px = http://www.gtsalive.com/images/partners/pizzahut.jpg
<br>
<br>
<div class="background-image"></div>
<div class="background-color"></div>

＆＃13;

Answer 2

为什么不使用背景重复？

.background-image{
    background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
    background-size: 100px auto;
    background-repeat: x-repeat;
    background-position: 0 0;
    width: 400px;
    height: 20px
}

多个背景图像位置

2 个答案:

解决方案

计算逻辑

推理

指出要点