我的RWD页面有一些奇怪的问题。我有一个背景图片,其中包含以下样式:
#background-image {
width: 100%;
height: 100%;
opacity: 0.5;
position: absolute;
z-index: -1;
background-image: url('../landing.jpeg');
background-attachment: fixed;
background-size: cover;
background-position: 85% 50%;
background-repeat: no-repeat;
}
当我在Chrome DevTools(以及FF)中处于移动模式时,一切看起来都不错:
但在真正的移动浏览器上,这种背景变得太大了:
可能是什么原因?我的移动浏览器是Android上的Chrome 63,我的桌面浏览器是Ubuntu上的Chrome 59。
答案 0 :(得分:3)
这是因为background-attachment: fixed
设置无法在移动浏览器上运行...
尝试删除background-attachment
属性并将position
道具更改为fixed
,如下所示:
#background-image {
width: 100%;
height: 100%;
opacity: 0.5;
position: fixed;
z-index: -1;
background-image: url('../landing.jpeg');
background-size: cover;
background-position: 85% 50%;
background-repeat: no-repeat;
}
希望这会有所帮助......
答案 1 :(得分:0)
尝试添加内部HEAD:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">