问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 微信小程序 Bug Android miui10.0 mix2 6.7.3

在微信小程序上想实现一个磨砂玻璃效果，现在效果已经实现，但是背景图片在开发工具和真机上的位置大小不一致，有图片错位问题。
wxml代码如下：


测试元素背景图片，使用background-attachment:fixed时，开发工具和真机上表现不一致，图片错位






wxss代码如下
page {
width: 100%;
height: 100%;
}

.body {
position: relative;
height: 100%;
width: 100%;
background: url("http://ozpg6gxnq.bkt.clouddn.com/test_card_bg.jpg") 0 / cover fixed;
}

/* .image{
width:100%;
height:100%;
display: block;
} */

.main {
overflow: hidden;
width: 200px;
height: 100px;
position: absolute;
top: 280px;
left: 60px;
font-size: 14px;
padding: 20px;
border: 1px solid #fff;
z-index: 1;
}

.main::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
filter: blur(1px);
margin: -30px;
z-index: -1;
background: url("http://ozpg6gxnq.bkt.clouddn.com/test_card_bg.jpg") 0 / cover fixed;
}

.content {
color: #fff;
}

效果图

微信小程序开发问题解答