我爱小程序
| 问题模块 | 框架类型 | 问题类型 | 操作系统 | 操作系统版本 | 手机型号 | 微信版本 |
|---|---|---|---|---|---|---|
| 客户端 | 小程序 | Bug | Android | miui10.0 | mix2 | 6.7.3 |
在小程序上想实现一个磨砂玻璃效果，现在效果已经实现，但是背景图片在开发工具和真机上的位置大小不一致，有图片错位问题。
wxml代码如下：
<view class="body"> <view class="main"> <view class="content">测试元素背景图片，使用background-attachment:fixed时，开发工具和真机上表现不一致，图片错位</view> </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;} |
效果图
网友回复
Giant：
开发工具与真机的大小不一样，造成背景图片的大小一样