html - 如何让视差滚动占用屏幕的整个宽度和高度？

Question

如何让图像覆盖整个屏幕？

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>

Answer 1

您需要将 body 高度设置为 100%:

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

parallaxBg 高度也为 100%:

height: 100%; 

例子:

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

		    /* Full height */
		    height: 100%; 

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

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

<div id="parallaxBg">
	<div class="text">
		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.
	</div>

希望这就是您所要求的!