在小程序上想实现一个磨砂玻璃效果，现在效果已经实现，但是背景图片在开发工具和真机上的位置大小不一致，有图片错位问题。
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;} |
效果图
开发工具与真机的大小不一样，造成背景图片的大小一样
有没有什么方法，让图片在真机上表现出来的效果和开发者工具上一样呢？即让两张背景图的相同位置部分的可以重合在一起
你不能把小方框的背景图弄成滤镜背景图吗？ 这样随便你定位在那都显示能你现在需要的效果
或者用CSS来弄滤镜的效果
css弄滤镜，要想达到效果，需要将底层的图片放入到小方框中，这样看起来才是滤镜效果。如果没有背景图片 看着只是个透明的效果
了解一下css的background: inherit;（背景继承）跟 CSS3 filter(滤镜)效果