最近开发小程序的过程中遇到了这样一个小问题,在wxss文件中通过background
设置背景图片,要实现背景图片上显示文字的效果,发现背景图片不显示,设置背景图片的代码如下:
.test {
width:100rpx;
height:30rpx;
background:url('../../img/image.png') no-repeat;
background-size: 100% 100%;
}
经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法。
-
本地图片转换为base64格式
.test { background:url(data:image/png;base64,VCdweSsd98iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m) no-repeat; width: 100rpx; height: 30rpx; background-size: 100% 100%; }
-
使用行内样式
<view class="test" style="background:url('../../img/image.png')"> <text>文字内容</text> </view>
行内样式经验证,存在模拟器正常显示,真机无法正常显示的问题
-
image替换背景图片,定位实现背景图片效果
<view class="test"> <image src="../../img/image.png"></image> <text>文字内容</text> </view>
.test{ width:100rpx; height:30rpx; position:relative; } .test image{ width:100%; height:100%; } .test text{ width:100%; height:100%; line-height:100%; text-align:center; position: absolute; top:0; left:0; font-family:"PingFangSC-Semibold"; color:#fff; font-size:18rpx; }
最终图片放在另外一个H5项目中,可通过网络地址访问,以网络图片的形式访问,解决了背景图片显示的问题。