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

• 解決方法

微信小程序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"; }