背景百分比的 CSS 计算如何工作？ [复制]

Posted 2023-05-08

【中文标题】背景百分比的 CSS 计算如何工作？ [复制]

【英文标题】：How does CSS computation for background percentages work? [duplicate]

【发布时间】：2014-10-28 04:27:37

【问题描述】：

我目前正在玩 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% 的背景。

【问题讨论】：

有趣的是中间的background-position可以是任意值，好像没关系，但一定要存在jsfiddle.net/#&togetherjs=74v86sn02J

看起来好像，因为您定义了三个背景图像，background-position 属性设置了每个图像的初始位置，该位置适用于每个“图像”的左边缘，在您的情况下是红色，蓝色和白色部分长度 33%

【参考方案1】：

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

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

想象一下在矩形框架的内部滑动一块矩形瓷砖；将它一直向右移动（即 100%）意味着它的右边缘接触到框架的右侧（因为你不能将它滑过框架），然后将它移动到bottom 意味着它的底边接触框架的底部。

一般来说，对于任何两个值为百分比的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%。因此，要定位图像，您需要使用绝对值来代替（完全放弃滑动拼图的类比）。

【参考方案2】：

就像 Woodrow 所说的，因为你的背景大小规则谁会申请每个背景，每个背景会占据你旗帜的三分之一，所以 0% 是第一个背景的起点。

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

这里是mozilla's doc about background-position

【参考方案3】：

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

【讨论】：

0%怎么能代表中心，不就是边缘吗？

所以假设整个标志是600px 宽。你有三种背景：蓝色、白色和红色。接下来，您将每个背景的大小设置为总宽度的三分之一 (200px)。现在您将蓝色背景的中心设置为距离 整个标志 左侧的 0%。所以 200px 宽的蓝色条实际上是悬挂在旗帜边缘的一半...只有右边的 100px 显示出来。

“所以 200px 宽的蓝色条实际上挂在旗子边缘的一半……只有右边的 100px 显示。”不，如果这是真的，那么存在的每个左对齐的背景图像都会被剪裁。

谢谢，我弄错了。很棒的来源丰富的答案，顺便说一句。