如何讓視差滾動消耗屏幕的全部寬度和高度？

CSS：

.parallaxBg { 
    background-image: url("image_test.jpg"); 

    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

HTML：

<div class="parallaxBg"> 
</div>

來源

2017-06-20 user7943

我製作了一個視差介紹和paralax botom div，然後將內容嵌套在...涵蓋整個頁面......這個css與你很相似 – weinde

_「我怎樣才能讓圖像覆蓋整個屏幕？「 - 通過獲取包含此背景圖像的元素來覆蓋整個屏幕......並且可能不是這樣一個獨特的新問題，它無法被研究... – CBroe

謝謝你們，它工作:) – user7943

您需要車身高度設置爲100％：

body, html { 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    }

而且parallaxBg高度爲100％過：

height: 100%;

例子：

body, html { 
 
\t \t  height: 100%; 
 
\t \t  padding: 0; 
 
\t \t  margin: 0; 
 
\t \t } 
 
\t \t #parallaxBg { 
 
\t \t \t /* The image used */ 
 
\t \t  background-image: url("https://placeimg.com/1000/800/any"); 
 

 
\t \t  /* Full height */ 
 
\t \t  height: 100%; 
 

 
\t \t  /* Create the parallax scrolling effect */ 
 
\t \t  background-attachment: fixed; 
 
\t \t  background-position: center; 
 
\t \t  background-repeat: no-repeat; 
 
\t \t  background-size: cover; 
 
\t \t } 
 

 
\t \t .text { 
 
\t \t \t position: relative; 
 
\t \t \t top: 600px; 
 
\t \t \t height: 300px; 
 
\t \t \t font-size: 2em; 
 
\t \t \t background: blue; 
 
\t \t \t padding: 2em; 
 
\t \t }

<div id="parallaxBg"> 
 
\t <div class="text"> 
 
\t \t Bacon ipsum dolor amet corned beef doner pig filet mignon t-bone pancetta beef tongue ground round meatball pork belly landjaeger tail. Turducken flank pork t-bone, shoulder pastrami short loin drumstick jowl tail bresaola strip steak tenderloin frankfurter. Corned beef short loin chuck venison pork jerky. Jowl leberkas cupim turkey flank drumstick porchetta strip steak ham hock tail shoulder ball tip brisket tri-tip. Beef ribs bresaola short ribs cow tenderloin, jerky ball tip shankle pastrami shoulder t-bone. 
 
\t </div>

希望這是你問的！

來源

2017-06-20 11:10:21 MarioZ

如何讓視差滾動消耗屏幕的全部寬度和高度？

回答

相關問題