0

这是一个例子。我想裁剪背景图像，然后使用裁剪图像作为更大（尺寸）元素的背景。我的意思是 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>

4

1 回答 1

5

由于分配给背景的位置，添加设置background时会消失。background-repeat: no-repeat它是0px -100px相对于原点设置的。您没有设置任何值background-origin，因此默认值（即，padding-box将被使用）和图像的高度仅为 100 像素。因此，当您指示浏览器不重复图像时，可见区域内没有任何内容。

对于演示中所示的情况，不需要裁剪图像，因为它的大小只有 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>

于 2015-11-23T05:41:47.657 回答