小程序图片显示问题
程序员文章站
2022-05-31 09:43:04
...
最近做项目的时候遇到了一个问题,记录一下。
**问题点:**同事用安卓手机测试小程序,发现背景图显示不出来,但是苹果手机的背景图是能够显示出来的。
**解决方案:**将背景图改成普通图片,通过定位来固定他。
方法一(目前我的解决方案):
wxml
<view>
<image class="imgs" src="../../images/bg.png"></image>
<view class="contents">其他内容</view>
</view>
wxss
.imgs{
width:100%;
height: 300rpx;
position: absolute;
top: 0;
z-index: 1;
}
.contents{
position: relative;
z-index: 2; //其他的内容想要浮在图上,必须要设置z-index,不然显示不出来
}
方法二(之前的方案,虽然同事的安卓手机显示不出来):
wxml
//背景图必须写在页面上,不然没效果
<view class="about-header" style="background:url(../../images/bg.png);background-repeat: no-repeat;background-size: 100%;">
<view>其他内容</view>
<view>
最终显示样式: