公告列表
公告列表
收藏
回答

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

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

效果图

回答关注问题邀请回答
收藏

1 个回答

  • 2018-10-24

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

    2018-10-24
    有用
    回复 4
    • 2018-10-24

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

      2018-10-24
      赞
      回复
    • 2018-10-24

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

      或者用CSS来弄滤镜的效果

      2018-10-24
      赞
      回复
    • 2018-10-25回复

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

      2018-10-25
      赞
      回复
    • 2018-10-25回复

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

      2018-10-25
      赞
      回复
请 登录 后发表内容
相关问题
相关文档