Question

我目前正在玩CSS渐变和位置，我有点想做我想做的事情但幸运的猜测但是我想了解它实际上是如何运作的。

例如，这里是法国国旗（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%)
        , linear-gradient(to right, 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％的背景毫无头绪。

Answer 1

background-position的百分比值不会相对于背景定位区域定位背景图像的原点。它定位整个图像。这意味着图像本身的尺寸也会被考虑在内（使用background-size调整尺寸后）。

100% 100%的背景位置类似于right bottom，定位图像使图像的右下角接触背景区域的右下角。同样，50% 50%类似于center center，将图像的中点放在背景区域的中点。

想象一下，在矩形框架内部滑动矩形瓦片;将它一直向右移动（即100％）意味着右边缘触摸框架的右侧（因为你无法通过通过框架滑动它），并将其移动到框架的右侧底部是指其底边接触框架的底部。

一般来说，对于两个值为百分比的任何background-position: x y，图像的x点与背景区域的x点对齐，图像的y点与y点对齐背景区域。

CSS2.1的描述很难读，所以我引用CSS3 Backgrounds and Borders来代替，甚至还有一个图形示例：

例如，如果值对为“0％0％”，则图像的左上角通常与框的填充边缘的左上角对齐。值对'100％100％'将图像的右下角放在该区域的右下角。使用“75％50％”的值对，图像的75％和50％的点位于该区域的75％和50％的位置。

但是如果你像我一样，并且你实时想象这个很糟糕，那么就想想一个滑动拼图。

请注意，这些都不适用于绝对值;绝对值确实定位图像的原点。但是，如果将绝对值锚定到右侧和/或底侧，则可以更改参考点，例如right 10px bottom 10px将背景图像定位在距背景区域右下角10个像素的位置。

如果要定位尺寸为背景区域100％的背景图像，则无法使用百分比，因为您无法完美地移动适合其框架的图块（顺便提一下对于最无聊的谜题或完美的恶作剧）。这适用于背景图像的内在尺寸是否与元素的尺寸匹配，或者您是否明确设置background-size: 100%。因此，要定位图像，您需要使用绝对值（完全放弃滑动拼图类比）。

Answer 2

就像伍德罗说的那样，因为你的背景大小规则会申请每个背景，每个背景会占据你旗帜的三分之一，所以0％是第一个背景的起点。

第二个会再拿第三个但是更容易理解认为50％它的中心超过50％这就是为什么他处于中间并占据容器的三分之一。如果需要，您可以使用中心而不是50％。

此处mozilla's doc about background-position

Answer 3

background-position属性设置背景的中心的位置。您已指定所有背景的宽度均为calc(100%/3)，高度为100%，然后您已指定三个背景中每个背景的中心的x位置（y位置默认值）到50％）。

背景百分比的CSS计算如何工作？

3 个答案: