关于 css:HTML 背景附件：已修复。滚动后背景被掩盖

HTML background-attachment: fixed. The background gets covered up after scrolling

我基本上是在尝试创建一个背景图像，这样它将永远固定在某个位置。但是，似乎如果 div 内部有太多内容并且我向下滚动，图像仍然保持固定，但我向下滚动的次数越多就会"覆盖"。

页面顶部的视图看起来很好
向下滚动一点后，背景开始被覆盖(可以看到图像仍然固定在原位)

代码片段如下。我在内部 div 中添加了许多新行来显示问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 4 Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
<style>

html, body {
height: 100%;
margin: 0;
}
.bg{
height: inherit;
background-image: url("images/background.jpg");

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

</style>
</head>
<body>

My First Bootstrap Page
This is some text.
This is some text.
This is some text.
LOL
This is some text.
This is some text.
<center>[wp_ad_camp_2]</center>This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
<center>[wp_ad_camp_3]</center>This is some text.

</body>
</html>

您需要将 overflow:scroll; 添加到 .bg 类

1
2
3
4
5
6
7
8
9

bg{
height: inherit;
background-image: url(http://placekitten.com/200/300);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
overflow:scroll;//new selector added
}

查看实时预览

相关讨论

把你的背景图片放在你的身体上。

另一个解决方案是：将溢出设置到您的 .bg 类中 overflow-x:auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 4 Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
<style>

body{
background-image: url("images/background.jpg");

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

html, body {
height: 100%;
margin: 0;
}
.bg{
height: inherit;

}

</style>
</head>
<body>

My First Bootstrap Page
This is some text.
This is some text.
This is some text.
<center>[wp_ad_camp_4]</center>LOL
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.

</body>
</html>

Check This Just give class "bg" to body 而不是 div

或者只是添加

overfloaw:scroll

在bg类中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 4 Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
<style>

html, body {
height: 100%;
margin: 0;
}
.bg{
height: inherit;
background-image: url("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
background-size: cover;
background-attachment: fixed;
background-position: right top;

}

</style>
</head>
<body class='bg'>

My First Bootstrap Page
This is some text.
This is some text.
This is some text.
LOL
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 4 Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
<style>

html, body {
height: 100%;
margin: 0;
}
.bg{
height: inherit;
background-image: url("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
background-size: cover;
background-attachment: fixed;
background-position: right top;
overflow:scroll;
}

</style>
</head>
<body >

My First Bootstrap Page
This is some text.
This is some text.
This is some text.
LOL
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.

</body>
</html>

删除 html, body 中的 height 100% 并删除 .bg 中的 height: inherit;。那应该可以。