css:background属性不生效

前言
❕在移动端上,部分手机无法正常使用background-position,background-size的属性。


先说我要实现的效果,就是将一张图放大,然后实现画面放大以达到前进的效果。

第一步效果
https://cdn.xiaolouyou.com/allove/Valentine2/bg.jpg

第二步效果,只显示绿框
https://cdn.ouyanting.com/2020-01-15/1.png

第三步效果,只显示绿框
https://cdn.ouyanting.com/2020-01-15/3.png

线上效果地址https://weixin.mountainkj.com.cn/valentine/,请在微信中代开。

部分样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
min-height: 100vh;
transition: all 2s linear;
bacgkround: url("https://cdn.xiaolouyou.com/allove/Valentine2/bg.jpg");
background-position: center top;
background-size: 100% auto;
}

.container.step2 {
background-position: center -250px;
background-size: 141% auto;
}

.container.step3 {
background-position: -658px -1195px;
background-size: 400% auto;
}

由于图片过大会显示出问题。


css:background属性不生效
作者
墨陌默
发布于
2020年1月15日
许可协议