可以滾動（最初修復）的完整背景圖像

Question

我試圖想出一個我自己的網站，其中有一個背景圖像，當它初始加載時會覆蓋整個頁面。我希望它能夠很好地響應，這樣我就可以看到整個背景圖像，而不管屏幕大小。

雖然這是抓住，當我滾動頁面，我想下一個div或元素準備就在下面（在滾動）。我能想到的最好的參考是fiftythree.com。

Answer 1

你在Fifththree.com上看到的僅僅是一個具有背景圖像集視口高度大小的div。

要根據屏幕大小製作圖像比例，請將其設置爲background-size: cover。

.hero { 
 
    background-color: salmon; 
 
    /* background-image: url(...); */ 
 
    background-position: center; 
 
    background-size: cover; 
 
    color: #fff; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 

 
.hero__title { 
 
    margin-top: calc(50vh - 2em); 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    padding: 1em; 
 
}

<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/> 
 
<div class="hero"> 
 
    <h1 class="hero__title">Look at this</h1> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <h2>Hello earthling</h2> 
 
</div>

Answer 2

我有同樣的問題，前一段時間，我沒有使用此教程修正： http://responsivedesign.is/resources/javascript-jquery/back-stretch

終點直道是一個jQuery插件，允許您添加動態大小的背景圖像到任何頁面。圖像將拉伸以適應頁面，並且會隨着窗口大小的改變而自動調整大小。

它是非常容易使用，它的工作:)

CSS

#header{ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

的Javascript

<script type="text/javascript"> 
    $.backstretch("/path/to/image.jpg", {speed: 150}); 

    // Perhaps you'd like to change the image on a button click 
    $(".button").click(function() { 
     $.backstretch("/path/to/next_image.jpg"); 
    }); 
</script> 

不要忘了在複製此html：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> 

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>; 

反正檢查鏈接:)

編輯：http://srobbin.com/jquery-plugins/backstretch/更簡單