背景大小和背景重复究竟是如何工作的？

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添加设置后，background-repeat: no-repeat由于分配给背景的位置，会消失。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>