css - 關(guān)于background-position百分比的問題?
問題描述
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%指的是圖片還是容器呢?
問題解答
回答1: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%的位置對象,效果就是背景圖放在容器的中間位置
回答2:1、
.box { background-position: calc(100%) calc(100%);}
算出來就是在右下角,這就一目了然了~后面的就沒啥事兒了~
2、此處calc中的100%指的是
.box { background-position: calc(x) calc(y);}
知道伐?
回答3:calc是英文單詞calculate(計(jì)算)的縮寫,是css3的一個(gè)新增的功能,用來指定元素的長度(通過計(jì)算取得結(jié)果值)。而x方向:calc(100% - 40px)表示總寬度 - 40px,其中的100%,是容器的總寬度(總高度)。
相關(guān)文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. macos - 如何徹底刪除mac自帶的apache和php4. DADB.class.php文件的代碼怎么寫5. mysql - 在log日志中已知用戶的某一步操作,如何獲取其上一步操作?6. shell - mysql更新錯(cuò)誤7. 網(wǎng)頁爬蟲 - 如何使用使用java抓取信息并制作一個(gè)排名系統(tǒng)?8. 如何設(shè)置一個(gè)無限循環(huán)并打破它。(Java線程)9. python小白 自學(xué)看書遇到看不懂的地方10. php對mysql提取數(shù)據(jù)那種速度更快

網(wǎng)公網(wǎng)安備