html - 多个背景图像位置

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;

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

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

Answer 1

解决方案

您必须为 background-position 使用以下设置

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

.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;
}

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

---

计算逻辑

本质上，当我们有多个图像并且所有图像的大小都相同时，逻辑会变成如下所示:

• 对于图像的水平放置:

  • 位置 X 的百分比 = 100% *(图片数量 - 1)/(图片总数 - 1)

• 对于图像的垂直放置:

  • Y 位置百分比 = 100% *(图片数量 - 1)/(图片总数 - 1)

---

推理

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

Quoting W3C Spec:

A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.

---

注意事项

以上行为仅适用于基于百分比的定位。基于像素的定位按正常预期工作。也就是说，下面的设置可以很好地工作:

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

.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;
}

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