css - 关于background-position百分比的问题？

Question

dome在这 https://jsfiddle.net/d1LpL9eu/

background-position: calc(100% - 40px) calc(100% - 20px);

background-position前两个值应该是
水平和垂直位置，分别是从左边和上边开始计算的，
为什么calc(100% - 40px)是从右侧开始计算的？
calc中的100%指的是图片还是容器呢？

Answer 1

calc(100% - 40px)
將背景圖的右邊和容器的右內邊界對齊，然後再向右移動40個像素
calc(100% - 20px);
將背景圖的下邊和容器的下內邊界對齊，然後再向上移動20個像素

background-position在使用百分比時，對容器和背景都有效,水平方向從左邊開始計算，垂直方向從上邊開始計算.
也就是background-position:50% 50%，會將容器的水平方向的50%的位置和背景圖50%的位置對齊，同時將垂直方向的50%的位置和背景圖的50%的位置對象，效果就是背景圖放在容器的中間位置

Answer 2

1、

.box {
    background-position: calc(100%) calc(100%);
}

算出來就是在右下角，這就一目了然了~後面的就沒啥事兒了~

2.此處calc中的100%指的是

.box {
    background-position: calc(x) calc(y);
}

知道伐？

Answer 3

calc是英文單字calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度（透過計算取得結果值）。而x方向:calc(100% - 40px)表示總寬度 - 40px,其中的100%，是容器的總寬度(總高度)。