CSS背景圖片封面

Question

我正在努力理解為什么我無法使background-cover屬性在div內正常工作？

 .box { height: 240px; width: 31.1111%; margin: 0px; float: left; box-sizing: border-box; border: 10px solid #fff; margin: 1.11111%; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.15); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.15); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.15); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

 <div class="box" style="background:url('http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png');"> <div class="overlay"> <div class="buttonContainer"> <button>preview</button> </div> </div> </div> 

Answer 1

內聯樣式具有更高的特異性 。 因此background會覆蓋屬性簡寫background-size 。

更改background ，以background-image ：

更新示例

<div class="box" style="background-image:url('http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png');">
    <div class="overlay">
        <div class="buttonContainer">
            <button>preview</button>
        </div>
    </div>
</div>

看完示例之后，似乎您可能對使用值contain而不是cover感興趣。 （例）

Answer 2

background是一個常規屬性，因此包括： backgound-image ， background-size ， background-color ， background-position等。

因此，在這種情況下， 您應該僅使用 background-image ，因為background正在覆蓋您上面的css定義的屬性。

問候

Answer 3

如果將background更改為background-image這將起作用，請參見此處的工作示例： http : //jsfiddle.net/3t7ftpky/

為什么這樣做？

background是一個簡寫屬性，通過將其放在一行中，它會覆蓋樣式表中的其他background-size屬性。 您可以在此處找到有關css background屬性的更多信息：