問題描述

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

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

background-position前兩個(gè)值應(yīng)該是水平和垂直位置，分別是從左邊和上邊開始計(jì)算的，為什么calc(100% - 40px)是從右側(cè)開始計(jì)算的？calc中的100%指的是圖片還是容器呢？

問題解答

calc(100% - 40px)將背景圖的右邊和容器的右內(nèi)邊界對齊，然后再向右移動(dòng)40個(gè)像素calc(100% - 20px);將背景圖的下邊和容器的下內(nèi)邊界對齊，然后再向上移動(dòng)20個(gè)像素

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

1、

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

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

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

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

知道伐？

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