微信小程序background-image不能直接指定本地图片

2019独角兽企业重金招聘Python工程师标准>>>

• 解决方法

微信小程序background-image不能直接指定本地图片

 

 

1	background-image: url("../../img/welcome.png");

 

使用本地图片指定背景的时候，系统会报错,如图所示

解决方法

如果出现这样的问题，我们有两种方法解决这个问题

方法一，使用base64编码

这种方法使用起来比较简单，但是图片的base64编码比较长，会很影响我们的代码结构，闹心

 

 

1	background-image: url("data:image/jpg;base64,");

 

可以直接采用这个网址进行转换：http://imgbase64.duoshitong.com/

方法二，使用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"; }

转载于:https://my.oschina.net/u/2436852/blog/2251869