背景大小和背景重復的工作原理如何？

Question

這是一個例子 。 我想裁剪背景圖像，然后將裁剪后的圖像用作更大（大小）元素的背景。 我的意思是div大於其背景，並且我不需要重復。 現在，當取消對background-repeat的注釋時，元素消失。 但是我以為它將顯示裁剪過的重復背景。

 #div { background-image: url(http://dummyimage.com/600x400/000/fff); padding: 10px; width: 100px; height: 100px; background-position: 0px -100px; background-size: 100px 100px; background-repeat: no-repeat; /*comment this*/ position: absolute; } 

 <div id="div"></div> 

Answer 1

當添加background-repeat: no-repeat設置時， background消失了，因為已將位置分配給背景。 相對於原點設置為0px -100px 。 您尚未為background-origin設置任何值，因此默認值（將使用padding-box ）和圖像的高度僅為100px。 因此，當您指示瀏覽器不要重復圖像時，可見區域中沒有任何內容。

對於演示中所示的情況， 不需要裁剪圖像，因為它的大小僅為100 x 100（使用background-size設置），並且div框的大小（以及所有padding均為10px）大於圖片（請參閱下面的代碼片段以查看實際效果）。

如果您想說要使用background-size屬性將600 x 400的圖像縮放為100 x 100並在div顯示，則可以按照下面的代碼片段所示進行操作。

 .div { /*position: absolute; commented out for demo */ background-image: url(http://dummyimage.com/600x400/000/fff); padding: 10px; width: 100px; height: 100px; /*background-position: 0px -100px; - this makes it positioned above the viewable area of the box container, so remove it */ background-size: 100px 100px; background-repeat: no-repeat; border: 1px solid red; /* just to show how box is bigger than image */ } /* If the image has to be centered within the div */ .div.centered { background-position: 50% 50%; } /* Just for demo */ div{ margin: 10px;} 

 <div class="div"></div> <div class="div centered"></div> 

---

另一方面，如果您打算使用background-position來指定應從中進行裁剪的區域，則無法這樣做。 在這種情況下，您應該避免使用background-size而應像下面的代碼片段一樣使用background-position 。

在此，通過將background-position指定為-240px -140px ，圖像中坐標（240,140）至（360,260）內的圖像部分將顯示在框中。 由於框的大小（包括填充），它顯示120 x 120像素的圖像。

 .div { position: absolute; background-image: url(http://dummyimage.com/600x400/000/fff); padding: 10px; width: 100px; height: 100px; background-position: -240px -140px; background-repeat: no-repeat; border: 1px solid red; /* just to show how box is bigger than image */ } /* Just for demo */ div{ margin: 10px; } 

 <div class="div"></div>