微信小程序background-image不能直接指定本地图片
| 1 | background-image: url("../../img/welcome.png"); |
使用本地图片指定背景的时候，系统会报错,如图所示
解决方法
如果出现这样的问题，我们有两种方法解决这个问题
方法一，使用base64编码
这种方法使用起来比较简单，但是图片的base64编码比较长，会很影响我们的代码结构，闹心
| 1 | background-image: url("data:image/jpg;base64,"); |
可以直接采用这个网址进行转换：
方法二，使用image控件，设置src属性
我们使用第二种，这种需要用到CSS层叠样式
position:relative和position:absolute设置对象属性为可定位（可重叠）
| 1 2 3 4 5 6 7 8 | <!--index.wxml--> <view class="relative"> <image class="pic_background" src="../../img/pic_background.png"></image>
<view class="container"> ..... </view> </view> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .relative{ height: 100%; width:100%; position:relative; }
.pic_background{ height: 100%; width:100%; position:absolute; }
.container { height: 100%; width:100%; flex-direction: column; color:#222222; font-size: 30rpx; position: absolute; font-weight:900; font-family: "幼圆","方正姚体",Geneva,"Times New Roman"; } |