背景图片在真机和开发工具上表现不一致问题？ - WXOPEN Club

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

wxml代码如下：

<view class="body">

<view class="main">

<view class="content"

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

view>

</view>

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;

}

效果图