例如,这里是法国国旗(merci)：
.serge_testDraw {
width: 10rem;
height: 10rem;
border: 0.2rem solid black;
background-image:
linear-gradient(to right,blue 0%,blue 100%),linear-gradient(to right,white 0%,white 100%),red 0%,red 100%)
;
background-size: calc(100% / 3) 100%;
background-repeat: no-repeat;
background-position: 0%,50%,100%;
}
为什么背景位置是0％,50％,100％而不是0,33.33％(三分之一),66.66％(三分之二)？
另外,我对如何定位尺寸为100％的背景毫无头绪.
解决方法
100％100％的背景位置类似于右下角,定位图像使得图像的右下角接触背景区域的右下角.同样,50％50％类似于中心,将图像的中点放在背景区域的中点.
想象一下,在矩形框架内部滑动矩形瓦片;将其一直向右移动(即100％)意味着右边缘触摸框架的右侧(因为您无法将其滑过框架),并将其移动到底部意味着其底部边缘接触框架的底部.
一般来说,对于任何背景位置：xy,其中两个值是百分比,图像的x点与背景区域的x点对齐,图像的y点与背景的y点对齐区.
CSS2.1的描述很难读,所以我引用CSS3 Backgrounds and Borders代替,其中甚至还有一个图形示例：
For example,with a value pair of ‘0% 0%’,the upper left corner of the image is aligned with the upper left corner of,usually,the Box’s padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘75% 50%’,the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
但是,如果你像我一样,并且你实时想象这个很糟糕,那么就想想一个滑动拼图.
请注意,这些都不适用于绝对值;绝对值确实定位图像的原点.但是,如果将绝对值锚定到右侧和/或底侧,则可以更改参考点,例如右侧10px底部10px将背景图像定位在距背景区域右下角10个像素的位置.
如果您想要定位大小为背景区域100％的背景图像,您将无法使用百分比,因为您无法完美地移动适合其框架的图块(顺便提一下最无聊的谜题或完美的恶作剧).无论背景图像的内在尺寸是否与元素的尺寸匹配,或者您明确设置背景尺寸：100％,这都适用.因此,要定位图像,您需要使用绝对值(完全放弃滑动拼图类比).
