背景百分比的CSS计算如何工作？ [英] How does CSS computation for background percentages work?

问题描述

我目前正在使用CSS渐变和位置，我可以做我想要的，但幸运的猜测，但我想了解这实际上是如何工作。

例如，这里是法国国旗（merci）：

  .serge_testDraw {
 width： 10rem; 
 height：10rem; 
 border：0.2rem solid black; 
 background-image：
线性渐变（向右，蓝色0％，蓝色100％）
，线性渐变（向右，白色0％，白色100％）
，线性梯度（右，红0％，红100％）
; 
 background-size：calc（100％/ 3）100％; 
 background-repeat：no-repeat; 
 background-position：0％，50％，100％; 
} 
  

背景位置如何为0％，50，100％ ，33.33％（三分之一），66.66％（三分之二）？

此外，我无法定位大小为100％的背景。

解决方案

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

100％100％的背景位置类似于右下角，定位图像，使右下角的图像触及背景区域的右下角。类似地， 50％50％类似于中心中心，将图像的中点放置在背景的中点区域。

想象一下，在矩形框架的内部滑动矩形砖;向右移动（即100％）意味着其右边缘触及框架的右侧（因为您不能通过框架滑动它），并将其移动到

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

CSS2.1 的说明很痛苦阅读，所以我会引用 CSS3背景和边框，而且甚至有一个图形化的例子：

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

但是，如果你像我一样，你很可能实时地想象这个，那么只是想一个滑动的谜题。

这些都不适用于绝对值;绝对值确定图像的原点。但是，如果您将绝对值锚定在右侧和/或底部，则可以更改参考点，例如 right 10px bottom 10px 将背景图像放置10像素

如果您要定位背景图片的大小是背景区域的100％，您将无法使用一个百分比，因为你不能移动一个完美的框架（这意味着最无聊的谜题或完美的恶作剧）。这适用于背景图像的内在尺寸是否与元素的尺寸相匹配，或者您显式设置了 background-size：100％。因此，要定位图像，您需要使用绝对值（完全放弃滑动拼图模拟）。

I'm currently playing around with CSS gradients and position, I kind of manage to do what I want but with lucky guesses but I'd like to understand how this actually all works.

For instance, here's the French flag (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%;
}

How come the background position is 0%, 50, 100% instead of 0, 33.33%(a third), 66.66% (two third)?

Plus, I'm clueless how to position backgrounds whose size is 100%.

解决方案

A percentage value for background-position does not position the origin of a background image with respect to the background positioning area. It positions the entire image. This means the dimensions of the image itself are also taken into account (after resizing it with background-size).

A background position of 100% 100% is analogous to right bottom, positioning an image such that the bottom right corner of the image touches the bottom right corner of the background area. Similarly, 50% 50% is analogous to center center, placing the midpoint of an image on the midpoint of the background area.

Imagine sliding a rectangular tile around the interior of a rectangular frame; moving it all the way to the right (i.e. 100%) means having its right edge touch the right side of the frame (since you can't slide it through the frame), and moving it to the bottom means having its bottom edge touch the bottom of the frame.

Generally speaking, for any background-position: x y where the two values are percentages, the x point of the image is aligned with the x point of the background area, and the y point of the image is aligned with the y point of the background area.

CSS2.1's description is painful to read so I'll quote CSS3 Backgrounds and Borders instead, where there's even a graphical example:

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.

But if you're like me, and you're terrible at visualizing this in real time, then just think of a sliding puzzle instead.

Note that none of this applies to absolute values; absolute values do position the origin of the image. However, the reference point can be changed if you anchor the absolute value to the right and/or bottom sides, for example right 10px bottom 10px positions a background image 10 pixels away from the bottom right corner of the background area.

If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).

这篇关于背景百分比的CSS计算如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！