Question

我想进行视差滚动，但背景附件对我不起作用:(
bgcolor实际上是＃83b2d9。甚至还有一种方法可以使用背景色而不是背景色吗？

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您可以使用linear-gradient创建所需的颜色，但您仍然可以使用背景图片，并且可以应用背景附件：

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  font-family: sans-serif;
  height: 100%;
}

#mainpage {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #83b2d9, #83b2d9);
  background-attachment: fixed;
  background-size:100% 50%;
  background-position:0 50%;
  background-repeat:no-repeat;
}

<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>
    <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>
    <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>

Answer 2

@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>

Answer 3

**CSS**

    * {
        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-color: #83b2d9;
        background-attachment: fixed;
        background-size: cover;
    }

**HTML**

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

    <body>

    <body>
    <div id="mainpage">
    <div id="mainpage">
    <div id="subpage">
    <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>
    <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>
    </div>
    </body>

    </body>
    </html>
    </html>

背景附件不起作用

3 个答案: