我想做一个视差滚动，但背景附件对我不起作用:(
bgcolor 实际上是#83b2d9。有没有一种方法可以为此使用背景颜色而不是背景图像？
@charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-image: url(img/bgcolor.png);
background-attachment: fixed;
background-size: cover;
}<!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>untitled</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>最佳答案
@charset "UTF-8";
* {
box-sizing: border-box;
}
body, html {
margin: 0;
font-family: sans-serif;
height: 100%;
}
#mainpage {
width: 100%;
height: 100%;
background-color:#83b2d9;
background-attachment: fixed;
background-size: cover;
display:block
}<!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>untitled</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>关于html - 背景附件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48520439/