覆蓋背景使背景圖像無響應

Question

 #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 ，然后在更改窗口大小后使圖像無響應？

Answer 1

如何刪除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>

Answer 2

更改background-size:cover; 到background-size: 100% 100%; background-repeat: no-repeat;; 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>

訪問這里

或者你可以使用它：

  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>

或者可以查看此鏈接

Answer 3

如果你想讓你的背景圖像在加載時填滿屏幕，然后不調整大小（我會重新考慮 - 但也許我沒有看到大圖，沒有雙關語;））

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

 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>

如果你想使它不會溢出並在加載后給你水平滾動，請將背景包裹在<div style = 'max-width:100%; overflow:hidden; position:relative;'> <div style = 'max-width:100%; overflow:hidden; position:relative;'> <div style = 'max-width:100%; overflow:hidden; position:relative;'> div - overflow:hidden; 將隱藏溢出divs邊界的所有內容（比如div內部的圖像將保持原始寬度，而當前寬度可能更小）和position:relative; overflow:hidden;需要overflow:hidden; 申請（IIRC - 如果我沒記錯的話）

Answer 4

您可以在初始頁面加載時通過jQuery應用.cover類，並在窗口調整大小時將其刪除，如下所示：

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

看小提琴

覆蓋背景使背景圖像無響應

問題描述

4 個解決方案

解決方案1
1 2015-09-30 08:40:22

解決方案2
1 2015-09-30 08:41:20

解決方案3
1 2015-09-30 08:44:02

解決方案4
1 2015-09-30 08:46:57

覆蓋背景使背景圖像無響應

問題描述

4 個解決方案

解決方案1 1 2015-09-30 08:40:22

解決方案2 1 2015-09-30 08:41:20

解決方案3 1 2015-09-30 08:44:02

解決方案4 1 2015-09-30 08:46:57

解決方案1
1 2015-09-30 08:40:22

解決方案2
1 2015-09-30 08:41:20

解決方案3
1 2015-09-30 08:44:02

解決方案4
1 2015-09-30 08:46:57