background-size：cover;財產

每當背景圖像變化時，我需要它來覆蓋身體。我使用的是background-size: cover，但它似乎不起作用。background-size：cover;財產

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s;

和這裏的jQuery的改變所述圖像：

$("body").css("background", objects[newNum].img);

的圖像被存儲在一個陣列（對象）。

CodePen：http://codepen.io/Chantun/pen/WxXaGy?editors=0010

來源

2016-07-29 Chantun

你需要改變你的背景的用法背景圖像。因爲它與背景大小衝突。

因此，對於你的CSS這將是：

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background-image: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s;

併爲您的JS應該是：

$("body").css("background-image", objects[newNum].img);

來源

2016-07-29 12:38:16 Ubie

謝謝！這很簡單。 – Chantun

背景封面是正確的工作。在默認身高：自動。使用最小高度：100vh爲身體。並將margin-top更改爲padding-top。

body { 
    min-height: 100vh; 
    padding-top: 60px; 
}

Codepen

來源

2016-07-29 12:17:06

只是擡起頭來！

background-attachment: fixed和background-size: cover不會很好地玩對方！ :(

他們如何以及爲何發生衝突這裏更詳細的解釋：https://stackoverflow.com/a/23811091

編輯：！還您background-attachment: fixed拼寫錯誤:)

來源

2016-07-29 14:58:56

您codepen更改background-attachment有兩個T的，而不是一個人做它工作如何，我認爲你想要它。你也可以結合你的背景規則，如速記：

background: #000 url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg) center center/cover no-repeat; 
background-attachment: fixed;

來源

2016-07-29 15:28:14

background-size：cover;財產

回答

相關問題