多个背景图像位置 [英] Multiple background image position

问题描述

查看小提琴。

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渲染一次，但事实并非如此。

The element is 400px wide and the background image is 100px wide. Each background image position is at 25% intervals, so I would expect each background image to be rendered every 100px, but this is not the case.

任何人在这方面有一些光吗？我想我缺少一些基本的东西。

Anyone shed some light on this? I guess I'm missing something basic.

推荐答案

解决方案

必须对 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>

基本上，当我们有多个图片且所有图片大小相同时，逻辑就变成如下：

Essentially, the logic becomes something like the below when we have multiple images and all of them are of equal size:

• 对于图片的水平放置：

• For Horizontal placement of images:

• = 100％*（图片数量 - 1）/（图片总数 - 1）

• 以百分比表示的位置Y = 100％*（图像编号 - 1）/（图像总数 - 1） li>
  

• Position Y in percentage = 100% * (image's number - 1) / (total no. of images - 1)

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

This is because when a percentage value is provided for background-position the user agent tries to match the point corresponding to the percentage value in the background image along with the corresponding point (specified by the same percentage value) in the element that is having the background image.

引用 W3C规范 ：

百分比X将点X％对齐（水平）或向下（对于垂直）图像与点X％ ）或向下（垂直）元素的填充框。例如，对于值对0％0％，图像的左上角与填充框的左上角对齐。值对100％100％将图像的右下角放在填充框的右下角。使用值对14％84％，图像上的点14％和84％被放置在点填充框的14％和84％。

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.

---

指向注释

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

---

Point to Note

The above behavior is only for percentage based positioning. Pixel based positioning works as per normal expectation. That is, the below setting would work perfectly fine:

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>

这篇关于多个背景图像位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！