`背景大小：封面`填滿邊框

有沒有什麼辦法可以達到background-size:cover的效果，同時也填滿了邊框後面的區域。爲了更好地說明這一點，請看下面的圖片：左圖像使用background-size:cover，整齊地填滿整個盒子本身不管是圖像是縱向還是橫向，但是隱藏在半透明的頂部和底部邊界之後。第二個圖像是使用background-size: auto 260px規則創建的，該規則給出了我想要的效果，但是僅適用，因爲我知道在這種情況下背景是橫向（並且框本身是200px和邊框30px）。`背景大小：封面`填滿邊框

enter image description here

甲的jsfiddle其用於呈現上述兩個箱可以是found這裏。我很難相信這是不可能的純CSS，但即使打開基於JavaScript的解決方案，否則（雖然我可以構建一個hackish Javascript解決方案，我不知道如何使看起來相對乾淨...）。仍然希望有一個CSS方法來做到這一點。

來源

2014-06-15 David Mulder

這可以通過設置可以實現background-origin屬性border-box：

#one{ 
    background-size:cover; 
    background-origin: border-box; 
}

fiddle

還有一個background-clip財產，這聽起來像它應該做的，但不 - 因爲背景默認情況下在邊界下延伸，問題在於爲什麼background-size:cover/contain/%不考慮邊界。向後兼容，我想。

來源

2014-06-15 16:06:39

不能相信我錯過了這個屬性。但是，您應該添加關於應該設置的值的詳細信息（'border-box'值）。 –

令人驚訝的是，我知道'背景剪輯'屬性，但從來沒有意識到'背景源'到底是什麼。如果你問我，這真是一個非常不直觀的名字。 –

我從未猜測過百萬年。謝謝！ –

`背景大小：封面`填滿邊框

回答

相關問題