爲什麼背景圖像會隨着這個標記而縮放？

我的風格定義是：上述爲什麼背景圖像會隨着這個標記而縮放？

<style> 
    .x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png); 
     border:solid 1px red; 
    } 
</style>

的image file是2624px X 2624px在64PX方形單元含有表情符號。 64是2624的1/41。單元格13,7中的圖像是駱駝。

我的標記是：

<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div> 
<div class='x' style='background-position:-832px -448px; background-size:4100%; 
    height:64px; width:64px;' ></div> 
<div class='x' style='background-position:-312px -168px; background-size:4100%; 
    height:24px; width:24px;' ></div>

的JS小提琴是https://jsfiddle.net/5j5ahhda/，輸出是：

我的第二DIV的理解是，我擠2624px圖像轉換成一個64像素的正方形，其大小的1/41，然後吹了41次，從而產生與原始尺寸相同的圖像。這種理解是否正確？

第三個DIV產生我想要實現的，但我不明白是什麼導致背景圖像很好地縮放到24/64。包含DIV的指定大小是否會導致縮放？

我想要的是24/64的原始圖像大小。有更直接的方法嗎？

來源

2016-12-02 Old Geezer

爲什麼要將背景大小擴展到4100％？大小是div的寬度和高度。 – Gabbax0r

如果我沒有縮放，背景圖像是原始大小，這不是我想要的。我希望背景是原始圖像文件的24/64。 –

background-size：4100％表示4100％的div尺寸...不是imgs尺寸。 –

我的第二DIV的理解是，我擠2624px圖像劃分爲64像素正方形，1 /它的尺寸的第41，然後吹起來的41倍，從而導致圖像中的原來一樣尺寸。這種理解是否正確？

是的。

第三個DIV產生了我想要實現的，但我不明白是什麼導致背景圖像很好地縮放到24/64。包含DIV的指定大小是否會導致縮放？

是的。百分比background-size是relative to the size of the element's background positioning area。該區域由元素的尺寸決定，而不是圖像的尺寸。當設置百分比background-size時，這允許背景圖像根據元素的尺寸與元素大小進行縮放。

來源

2017-02-04 11:07:49 BoltClock

爲什麼背景圖像會隨着這個標記而縮放？

回答

相關問題