收藏
回答

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

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 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;
}

效果图

最后一次编辑于  2018-10-24
回答关注问题邀请回答
收藏

1 个回答

  • 遇见了便是幸福
    遇见了便是幸福
    2018-10-24

    开发工具与真机的大小不一样,造成背景图片的大小一样

    2018-10-24
    赞同
    回复 4
    • sunlax
      sunlax
      2018-10-24

      有没有什么方法,让图片在真机上表现出来的效果和开发者工具上一样呢?即让两张背景图的相同位置部分的可以重合在一起

      2018-10-24
      回复
    • 遇见了便是幸福
      遇见了便是幸福
      2018-10-24

      你不能把小方框的背景图弄成滤镜背景图吗? 这样随便你定位在那都显示能你现在需要的效果

      或者用CSS来弄滤镜的效果

      2018-10-24
      回复
    • sunlax
      sunlax
      2018-10-25回复遇见了便是幸福

      css弄滤镜,要想达到效果,需要将底层的图片放入到小方框中,这样看起来才是滤镜效果。如果没有背景图片  看着只是个透明的效果

      2018-10-25
      回复
    • 遇见了便是幸福
      遇见了便是幸福
      2018-10-25回复sunlax

      了解一下css的background: inherit;(背景继承跟 CSS3 filter(滤镜)效果

      2018-10-25
      回复