微信小程序開(kāi)發(fā)背景圖顯示功能
更新時(shí)間：2018年08月08日 08:42:29 作者：西嶺千秋雪
這篇文章主要介紹了微信小程序開(kāi)發(fā)--背景圖顯示,需要的朋友可以參考下
這兩天開(kāi)發(fā)微信小程序，在設(shè)置背景圖片時(shí)，發(fā)現(xiàn)在wxss里面設(shè)置 background-image:(url) 屬性，不管是開(kāi)發(fā)工具還是線上都無(wú)法顯示。經(jīng)過(guò)查資料發(fā)現(xiàn)，background-image 只能用網(wǎng)絡(luò)url或者base64圖片編碼 ， 本地圖片只能用 image標(biāo)簽src屬性才行。當(dāng)然 image標(biāo)簽src屬性也可以使用網(wǎng)絡(luò)url或者base64圖片編碼。
下面通過(guò) image 標(biāo)簽src屬性設(shè)置，實(shí)現(xiàn)背景圖顯示
界面結(jié)構(gòu)：
<view class='set-background'>
<image class='background-image' src='{{item.countryPic}}'></image>
<view class='background-content'>
<view class="set-background-avatar" background-size="cover">
<image class="post-specific-image" src="{{item.picture}}"></image>
</view>
</view>
</view>
wxss樣式：
.set-background {
display: flex;
flex-direction: column;
align-items: center;
height: 150px;
}
.set-background-avatar {
width: 220px;
height: 150px;
}
.background-content {
position: absolute;
z-index: 1;
}
.background-image {
width: 225px;
height: 150px;
opacity: 0.8;
}
.post-specific-image {
width: 215px;
height: 150px;
vertical-align: middle;
}
顯示結(jié)果：
總結(jié)
以上所述是小編給大家介紹的微信小程序開(kāi)發(fā)背景圖顯示功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
![JavaScript中document.forms[0]與getElementByName區(qū)別](http://img.jbzj.com/images/xgimg/bcimg0.png)
JavaScript中document.forms[0]與getElementByName區(qū)別
在很多情況下JavaScript中document.forms[0]與getElementByName這兩種用法沒(méi)有區(qū)別，這片文章詳細(xì)的解釋了兩者的區(qū)別和用法，有興趣的朋友可以參考一下。2015-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序頁(yè)面生命周期的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript中instanceof運(yùn)算符的用法總結(jié)
這篇文章主要是對(duì)JavaScript中instanceof運(yùn)算符的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了微信小程序開(kāi)發(fā)技巧匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
js浮點(diǎn)數(shù)保留兩位小數(shù)點(diǎn)示例代碼(四舍五入)
本篇文章主要介紹了js浮點(diǎn)數(shù)保留兩位小數(shù)點(diǎn)示例代碼(四舍五入) 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
最近在學(xué)習(xí)bootstrap3.3.5，遇到一個(gè)問(wèn)題搞不清楚<li role="presentation">到底什么含義？今天小編通過(guò)本文給大家詳細(xì)介紹下，一起看看吧2016-12-12
JS檢測(cè)瀏覽器開(kāi)發(fā)者工具是否打開(kāi)的方法詳解
本篇文章主要講述幾種前端JS檢測(cè)開(kāi)發(fā)者工具是否打開(kāi)的方法,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了JavaScript中BOM對(duì)象原理與用法,,結(jié)合實(shí)例形式分析了javascript中BOM瀏覽器對(duì)象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
JS值當(dāng)前DIV的ID值的代碼...2007-05-05
Javascript中判斷一個(gè)值是否為undefined的方法詳解
這篇文章給大家詳細(xì)介紹了在Javascript中如何判斷一個(gè)值是否為undefined，對(duì)大家的日常工作和學(xué)習(xí)很有幫助，下面來(lái)一起看看吧。2016-09-09