背景夹与背景大小的封面喙盖？

我有一个背景图像的div。我希望图像始终至少有1％的左侧和底部边距/填充。 div的容器是一个动态绝对定位的盒子，其大小可以为5％或95％（以及CSS过渡之间的所有内容）。背景夹与背景大小的封面喙盖？

我选择通过将背景图像上该div，其具有5％的最小高度和100％的宽度，以实现这一点。背景不重复，居中并设置为包含在区域内（background-size：contains）。我决定去与1％的填充和背景夹CSS属性内容中，这应该意味着背景覆盖仅开始于1％远离边界的内容。我选择填充和未余量，因为箱上浆被设置为边界框，因此宽度100％的额外的填充不会增加这是不符合余量的情况下的div的大小。

然而，这并没有按预期工作：当使用background-clip：content-box与background-size：contains一起时，背景包含在边框而不是content-box中，并且填充物将内容和边界之间的区域。例子：

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; 
 
}

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

所以问题是：

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

附：我不是英语，因此对可能出现的错误或误解表示歉意。此外，如果您不了解问题，我会尽力解释。

来源

2016-11-19 user4285211

是的，这是正常行为。 content-box并不意味着它的图像大小，它意味着它被剪裁。
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
在下面样品Ⅰ中使用的伪类来实现它

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); 
 
}

<div> 
 
</div>

来源

2016-11-19 12:42:49 LGSon

背景夹与背景大小的封面喙盖？

回答

相关问题