Question

这是一个example。我想裁剪背景图像，然后使用裁剪图像作为更大（大小）元素的背景。我的意思是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 box的大小（以及所有方面的10px的padding）大于图像（请参阅下面的代码片段以查看此操作）。

如果您的意思是说要使用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指定为.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; }，图像中存在于图像上的坐标（240,140）至（360,260）内的部分将显示在框内。由于盒子的大小（包括填充），它显示120 x 120像素的图像。

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

_prev_phone_number

背景大小和背景重复的确切程度如何？

1 个答案: