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

我目前正在玩CSS漸變和位置，我有種設法做我想要的，但幸運的猜測，但我想了解這實際上是如何工作的。背景百分比的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％的背景。

來源

2014-09-03 Serge Profafilecebook

有趣的是中間的'background-position'可以是任何值，它似乎並不重要，但它必須存在http://jsfiddle.net/#&togetherjs=74v86sn02J – 2014-09-03 15:45:34

看起來好像，由於您定義了三個背景圖像，所以'background-position'屬性設置每個圖像的初始位置，這適用於每個「圖像」的左邊緣，在您的情況下，長度爲33％的紅色，藍色和白色部分 – 2014-09-03 15:52:09

爲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%。因此，要定位圖像，您需要使用絕對值（完全放棄滑動拼圖類比）。

來源

2014-09-03 16:14:07 BoltClock

background-position屬性設置中心的位置的背景。您已指定所有背景的寬度爲calc(100%/3)，高度爲100%，則您已指定三個背景中每一個的中心的x位置（y位置默認爲50％）。

來源

2014-09-03 15:36:06

0％如何代表中心，是不是邊緣？ – 2014-09-03 15:46:59

因此我們假設整個標誌寬度爲600px。你有三個背景：藍色，白色和紅色。接下來，將每個背景的大小設置爲總寬度的三分之一（'200px'）。現在您將藍色背景的中心設置爲*整個標誌*左側的0％。所以200px寬的藍色條子實際上懸掛在旗幟邊緣的中間位置......右側僅顯示100px。 – 2014-09-03 16:03:30

「，因此200px寬的藍色條子實際上懸掛在國旗邊緣的中間位置......右側只顯示100px。」不，如果這是真的，那麼存在的左對齊的每個背景圖像都將被裁剪。 – BoltClock 2014-09-03 17:00:02

像伍德羅說，因爲你的背景大小的規則誰會去申請每個背景，每個背景會佔用你的旗的三分之一，所以0％是第一個背景的起點。

第二個將再次需要三分之一，但更容易理解認爲50％的中心超過50％，這就是爲什麼他在中間，並採取三分之一的容器。如果你願意，你可以使用中心而不是50％。

這裏的mozilla's doc about background-position

來源

2014-09-03 15:43:22 AlexDom

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

回答

相關問題