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); background-repeat: no-repeat; background-position: 75% 0,50% 0,25% 0,0 0; width: 400px;
元素宽400像素,背景图像宽100像素.
每个背景图像位置间隔为25％,因此我希望每100px渲染一次背景图像,但事实并非如此.
有人对此有所了解吗？我想我错过了一些基本的东西.
解决方法
您必须使用以下设置进行背景位置
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);
background-repeat: no-repeat;
background-position: 100% 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)
推理
这是因为当为背景位置提供百分比值时,用户代理尝试匹配与背景图像中的百分比值对应的点以及具有该背景图像的元素中的对应点(由相同的百分比值指定).背景图.
Quoting 07000:
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);
background-repeat: no-repeat;
background-position: 300px 0,0px 0;
width: 400px;
height: 20px
}
.background-color {
background: linear-gradient(to right,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>
