1. 程式人生 > >第1坑:wxss中background屬性使用背景圖片無效的問題

第1坑:wxss中background屬性使用背景圖片無效的問題

微信小程序 小程序 微信小程序踩坑指南

【我是坑】:wxss 中 background 屬性使用背景圖片無效。有些時候在開發工具上正常,但是手機上面預覽背景圖片無效了!

【原因】:微信小程序中背景圖片不能是本地圖片。

【解決】:換成遠程網址或者圖片base64編碼。

【延伸閱讀】:

1.什麽是 base64 編碼? 
圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串,使用該字符串代替圖像地址。這樣做有什麽意義呢?我們知道,網頁上的每一個圖片,都是需要消耗一個 http 請求下載來的(所以才有了 css sprites 技術的應運而生,但是 css sprites 也有自身的局限性)。要是圖片的下載不用向服務器發出請求,而可以隨著 HTML 的下載同時下載到本地那就太好了,而 base64 正好能解決這個問題。

2.什麽時候用 base64 編碼?
在很多地方,我們經常會制作一個很小的圖片大概是幾px*幾px,然後平鋪它當背景圖。因為是背景圖的緣故,這種圖片往往只有幾十字節,卻需要一個 http 請求,十分不值得。那麽此時將它轉化為 base64 編碼,何樂而不為?!因此,如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖(Css Sprites)的話,那麽就明智的選擇用base64 編碼吧。

3.使用 base64 不代表性能優化
是的,使用 base64 的好處是能夠減少一個圖片的 HTTP 請求,然而,與之同時付出的代價則是 CSS 文件體積的增大,CSS 文件的體積直接影響渲染,導致用戶會長時間註視空白屏幕。另外,base64 編碼還會造成代碼可讀性變差。所以不能濫用 base64 編碼。

4.更便捷的將圖片轉化為 base64 編碼
將圖片轉化為 base64 編碼有許多工具,但是經常被墻登陸不了。這裏介紹一個更為快捷的方法,就是利用 Chrome 瀏覽器或 QQ 瀏覽器,這裏以 QQ 瀏覽器為例,具體做法如下:打開 QQ 瀏覽器新建一個窗口,然後把要轉化的圖片直接拖入瀏覽器,鼠標右鍵,選擇“查看”菜單,如下圖所示,就會顯示該圖片的 base64 編碼,是不是很方便。

技術分享圖片


第1坑:wxss中background屬性使用背景圖片無效的問題