小程序模板網(wǎng)

如何給小程序頁面加載一張背景圖片

發(fā)布時間:2018-05-29 11:37 所屬欄目:小程序開發(fā)教程

我們知道,在PC端,想在一個頁面插入一張背景圖,只需要如下屬性即可。

 

  1. background-image: url("../images/photo.png");

在小程序里面,如此做法就行不通了,圖片不但不會顯示而且還會報錯了

 

  1. pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取,可以使用網(wǎng)絡圖片,或者 base64,或者使用<image/>標簽。

很多人都會有這樣的一種感受,在一邊學習一遍做項目的過程中,總會遇到很多坑,今天給大家填坑,如何給小程序頁面插入一張背景圖。  參考了一下小程序的參考手冊:https://www.w3cschool.cn/weixinapp/weixinapp-qa.html  在網(wǎng)上瀏覽了一遍,找到了幾個比較靠譜的解決方案,簡單方便。 

解決方案:  解決方法一:  在使用背景圖片的時候用網(wǎng)絡圖片,就是用外鏈的形式,比如你將這張圖片放到你的服務器,如:https://xxxx/xxx.jpg;  1:用工具連接服務器 

2:將桌面的圖片拖入指定服務器文件夾底下  3:得到圖片網(wǎng)絡連接,添加到代碼中,則可以顯示背景圖片 

解決方法二:  將背景圖片使用編碼base64進行轉(zhuǎn)換,可以在這個網(wǎng)址進行http://tool.css-js.com/base64.html 轉(zhuǎn)換,如:background-image: url("轉(zhuǎn)換后得到的編碼文本"),如果多次使用的話可以將該值設置為全局變量,再在js文件進行引用即可;  1:打開在線圖片轉(zhuǎn)換平臺   

2:將桌面的圖片導入,生成base64編碼 

3:將第三方平臺編譯過后的base64編碼復制到wxss里面

 

  1. // Base64 在wxss中的使用
  2. page{
  3. background-image: url(""data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");
  4. }

4:效果如下: 

缺點就是,這一大串編碼太占用我們的代碼空間了,鼠標要拖動許久許久,難免產(chǎn)生視覺疲勞。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24479.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢