h5开发网站-css实现页面的背景固定定位

一、需求：

h5网站在页面滚动时，背景图片保持不变，而不是跟随滚动。

二、解决方式：

使用背景固定定位，只需要在CSS中增加一个background-attachment: fixed;属性即可。

具体代码：

<div class="item_right">
	<img src="images/image001_about@2x.png">
div>


<style>
	.item_right {
		width: 60.75%;
		height: 500px;
		position: absolute;
		right: 0;
		background-image: url(../images/image001_about@2x.png);
		background-repeat: no-repeat;
		background-size: 60.75% 100%;
		background-attachment: fixed;   /* 这一行是重点 */
		background-position: top right;
	}
	 .item_right img {
		max-width: 100%;
		height: auto;
		visibility: hidden;
	}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、手机端兼容问题

在某些苹果设备上，background-attachment: fixed可能无法正常工作。这是因为在某些苹果设备上，当页面滚动时，固定定位的背景图像会出现问题。

使用一下方式来处理：

<div class="aboutus">
	
    <div class="item_outer">
        <div class="item itemOne">
            <div class="item_left">左边内容div>

			
            <div class="item_right">
                <img src="__INDEX_IMAGES__/image001_about@2x.png"/>
            div>
        div>
    div>
    
	
    <div class="item_outer">
        <div class="item itemTwo">
            <div class="item_left">左边内容div>

			
            <div class="item_right">
                <img src="__INDEX_IMAGES__/image002_about@2x.png"/>
            div>
        div>
    div>

div>


<style>
	/*pc端显示的样式*/
	.aboutus .item .item_right {
		width: 60.75%;
		height: 500px;
		background-image: url(../images/image001_about@2x.png);
		background-repeat: no-repeat;
		background-size: 60.75% 100%;
		background-attachment: fixed;
		background-position: top right;
		position: absolute;
		right: 0;
	}
	.aboutus .item_right img {
		max-width: 100%;
		height: auto;
		visibility: hidden;
	}
	.aboutus .itemTwo .item_right {
		background-image: url(../images/image002_about@2x.png) !important;
	}

	/*移动端显示的样式*/
	@media only screen and (max-width:760px) {
		.aboutus .item .item_right {
		    display: none;
		}
		/*最外层盒子*/
		.aboutus{
			width: 100%;
			height: 190vw; /*固定的高度*/
			position: relative;
		}
		.aboutus .item_outer{
			width: 100%;
			height: 85vw;
			position: relative;
			overflow: hidden;  /*必须写，否则ios会失效*/
		}
		.aboutus .item {
			height: 85vw;  /*固定的高度*/
			margin-bottom: 4px;
			position: absolute !important;
		}
		/*第1个盒子*/
		.aboutus .itemOne{
			z-index: 1;
			clip: rect(0, auto, auto, 0);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.aboutus .itemOne:before {
			content: "";
			position: fixed;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
			will-change: transform;
			background-image: url(../images/sj_image01_about@2x.png);
		}
	
		/*第2个盒子*/
		.aboutus .itemTwo{
			z-index: 1;
			clip: rect(0, auto, auto, 0);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.aboutus .itemTwo:before {
			content: "";
			position: fixed;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
			will-change: transform;
			background-image: url(../images/sj_image02_about@2x.png);
		}
	}
	
style>
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

注：在手机端 外层盒子设置一个固定的高度height: 190vw; 定位在上面的其他元素也用vw的单位。

到这里ok完成！~

————————————————————————————————————————————

tips：js检测是否为苹果设备的方法：

// 检测是否为苹果设备
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

// 如果是苹果设备，将背景图像改为固定定位
if (isIOS) {
    var background = document.querySelector('.background');
    background.style.backgroundAttachment = 'scroll';
}
1
2
3
4
5
6
7
8

ok~