背景图片在真机和开发工具上表现不一致问题？
发布于 7 年前 作者 yangsong 11121 次浏览 来自 问答

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

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 回复

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

回到顶部