Question

我有一个带背景图片的div。我希望图像始终至少有1％的左下边距/填充。 div的容器是一个动态绝对定位的盒子，可以有5％或95％的大小（以及介于CSS过渡之间的所有内容）。

我选择通过将背景图像放在最小高度为5％且宽度为100％的div上来实现此目的。背景不是重复，居中并设置为包含在区域内（background-size：contains）。我决定使用1％填充和背景剪辑CSS属性到内容框，这应该意味着背景仅覆盖从边界开始1％的内容。我选择了填充而不是边距，因为box-sizing设置为border-box，因此带有额外填充的宽度100％不会增加div的大小，而不是边距的情况。

然而，这没有按预期工作：当使用background-clip：content-box和background-size：contains时，背景包含在border-box而不是content-box中，并且padding会切掉内容和边框之间的区域。例如：

＆＃13;

div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
  float: left;
  width: 200px;
  height: 200px;
}

.clipped {
  border: 1px solid blue;
  padding: 20px;
  background-clip: content-box;
}

.normal {
  border: 1px solid green;
  padding: 20px;
  background-size: contain;
}

＆＃13;

<div class="clipped">
</div>
<div class="normal">
</div>

＆＃13;

所以问题是：

这是正常行为吗？
这在哪里记录？
实现我需要的解决方案是什么？

P.S。我不是英国人，因为可能出现的错误或误解而道歉。如果你不理解这个问题，我也会尝试更好地解释。

Answer 1

是的，这是正常行为。 content-box并不意味着图像在其中被调整大小，这意味着它会被图像剪切。
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
在下面的示例中，我使用了伪类来实现它

＆＃13;

div {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

div::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}

＆＃13;

<div>
</div>

＆＃13;

背景剪辑与背景大小覆盖喙盖？

1 个答案: