Question

我想制作视差滚动，但似乎背景附件对我来说根本不起作用我应该怎么做才能使蓝色背景固定，让第二个div滚动它？

@charset "UTF-8";

* {
	box-sizing: border-box;
}

body, html {
	margin: 0;
    font-family: 'Overpass', sans-serif;
	height: 100%;
}

#mainpage {
	width: 100%;
	height: 100%;
	background-color: #83b2d9;
	background-attachment: fixed;
	background-size: cover;
}

#subpage {
	width: 100%;
	background-color: white;
}

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>trrtr</title>

</head>

<body>

<div id="mainpage">
</div>
<div id="subpage">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>

</body>
</html>

Answer 1

通过制作 MainPage div position:fixed;，您可以让该div永远留在屏幕上......

@charset "UTF-8";

* {
	box-sizing: border-box;
}

body, html {
	margin: 0;
    font-family: 'Overpass', sans-serif;
	height: 100%;
}

#mainpage {
	width: 100%;
	height: 100%;
	background-color: #83b2d9;
	background-attachment: fixed;
	background-size: cover;
    position:fixed;
    left:0;
    top:0;
    z-index:-1;
}

#subpage {
	width: 100%;
	background-color: white;
}

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>trrtr</title>

</head>

<body>

<div id="mainpage">
</div>
<div id="subpage">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>

</body>
</html>

Answer 2

你可以试试这个：

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>trrtr</title>

    </head>

    <body>

    <div id="mainpage" >
     <br>
    <br>
    <br>
     <br>
    <br>
    <br>
    <br>
    <br>
    <div id="subpage">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
    </div>
</div>
    </body>
    </html>


 @charset "UTF-8";

    * {
        box-sizing: border-box;
    }

    body, html {
        margin: 0;
        font-family: 'Overpass', sans-serif;
        height: 100%;
    }

    #mainpage {
        width: 100%;
        height: 100%;
        background-image: url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
        background-attachment: fixed;
        background-size: cover;
    }

    #subpage {
        width: 100%;
        background-color: white;
    }

这里是fiddle

为什么我的视差滚动不起作用？

2 个答案: