封面背景使背景圖像不響應

#section{ 
 
    position: absolute; 
 
    top:0; 
 
    height: 100%; 
 
    width:100%; 
 
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<body> 
 
    <section id="section"></section> 
 
</body>

background-size時被設定爲cover圖像改變其尺寸，當窗口尺寸被改變以覆蓋窗口。有沒有辦法在開始時完全覆蓋background，然後在更改窗口大小以使圖像無響應之後？

來源

2015-09-30 developer

我想你可以用JavaScript/jQuery的做到這一點。 – cgee

如何刪除background-size而不是。圖像將以原始大小顯示。

#section{ 
 
    position: absolute; 
 
    top:0; 
 
    height: 100%; 
 
    width:100%; 
 
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center; 
 
}

<body> 
 
    <section id="section"></section> 
 
</body>

來源

2015-09-30 08:40:22 nvl

如果圖像很小，則不會覆蓋整個背景。 – developer

您目前的代碼也不會。如果你希望背景看起來不錯，你不會希望它首先超越極限。 –

我不想嘲弄它。我只是想要它覆蓋整個窗口。但是，當窗口大小小於圖像大小時，不會縮小。 – developer

變化background-size:cover;到background-size: 100% 100%; background-repeat: no-repeat;;

這將是這樣。

#div{ 
    position: absolute; 
    top:0; 
    height: 100%; 
    width:100%; 
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 


<body> 
    <div id="section"></div> 
</body>

訪問here

或者你可以使用它：

body{ 
    position: absolute; 
    top:0; 
    height: 100%; 
    width:100%; 
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center; 
    background-size: 100% 100%; 

} 

    <body></body>

，或者如果你正在尋找讓你的背景圖片填充屏幕上的負荷可以檢查此link

來源

2015-09-30 08:41:20

調整頁面大小後，這仍將更改div（和背景圖像）的大小。 –

好的我爲你編輯 –

但是這會改變圖像尺寸，這會使圖像變得難看 – developer

，然後不再調整大小（我將重新考慮 - 但也許我沒有看到大圖，沒有雙關語意思））

一個可能的選項是加載圖像在一個單獨的div，設置z-index:-9999;（這將使div位於所有其他div下面），然後使用JavaScript來確定圖像/ div的大小，當它覆蓋整個頁面並更改div的大小與JavaScript element.style.width = ""

window.onload = function(){ 
 
    theWidth = document.getElementById("background").offsetWidth; 
 
    theHeight = document.getElementById("background").offsetHeight; 
 
    document.getElementById("background").style.width = theWidth; 
 
    document.getElementById("background").style.height = theHeight; 
 
}

#background{ 
 
    position: absolute; 
 
    top:0; 
 
    height: 100%; 
 
    width:100%; 
 
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<body> 
 
    <section id="background"></section> 
 
    <section id="your_content"></section> 
 
</body>

如果你希望讓這個它不會溢出，並給您水平滾動加載後，包裹在後臺a <div style = 'max-width:100%; overflow:hidden; position:relative;'> div - overflow:hidden;將隱藏所有c這意味着溢出那divs界限（像div裏面的圖像，它將在原來的寬度，而目前的寬度可能會更小）和position:relative;overflow:hidden;需要應用（IIRC - 如果我沒記錯的話）

來源

2015-09-30 08:44:02

也許有辦法只在css中做？ – developer

也許可以 - 試試諾瓦爾的答案是否可行。他可能會參與其中。 –

你可以做通過jQuery在初始頁面加載應用設備罩起來類，並刪除它，當窗口被調整大小，就像這樣：

$('section#section').addClass('cover'); 
$(window).on('resize', function() { 
    $('section#section').removeClass('cover'); 
});

看fiddle

來源

2015-09-30 08:46:57 Mike

圖像沒有完全覆蓋窗口 – developer

再次檢查我的小提琴，我更新了主體類https://jsfiddle.net/halloecho/jfzuhbn6/ – Mike

封面背景使背景圖像不響應

回答

相關問題