如何让视差滚动消耗屏幕的全部宽度和高度？

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

如何让视差滚动消耗屏幕的全部宽度和高度？

回答

相关问题