第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.jpg


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章