背景夾與背景大小的封面喙蓋？

我有一個背景圖像的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

背景夾與背景大小的封面喙蓋？

回答

相關問題