鍍金池/ 問(wèn)答/HTML5  C  HTML/ 微信小程序設(shè)置背景圖片

微信小程序設(shè)置背景圖片

在微信小程序是無(wú)法使用css的background-image為元素設(shè)置背景圖片的。于是我就用

<image src='../../images/img.jpg'></image>
<view>用absolute定位設(shè)置背景圖片</view>

然后通top,left,right,bottom將view的內(nèi)容放在image的頂層，想問(wèn)問(wèn)這樣的方法會(huì)不會(huì)出問(wèn)題，按目前我的真機(jī)（只有6s）測(cè)試是沒(méi)問(wèn)題的。

回答
編輯回答
風(fēng)清揚(yáng)

用定位要注意定位父級(jí)

<view class='imgbox'>
  <image class='ico' mode='scaleToFill' src='{{ico}}></image>
    <text class="txt">{{text}}</text>
</view>
.imgbox{
  position: relative;
  width: 600rpx;
  height: 400rpx;
}
.ico{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.txt{
   position: relative;
}
2017年12月25日 02:20
編輯回答
毀與悔

這種方式測(cè)試真機(jī)是沒(méi)有問(wèn)題的，但是從寫(xiě)代碼的角度，如果是背景圖片用background-image設(shè)置更適合些

background-image 使用的時(shí)候需要注意它只能用網(wǎng)絡(luò)url或者base64 ，本地圖片用image標(biāo)簽

設(shè)置背景圖片（手機(jī)和微信開(kāi)發(fā)者工具上面預(yù)覽都可以顯示出來(lái)）

<view style="background-image: url('https://segmentfault.com/img/bVbbZxX?w=1080&h=517')">用absolute定位設(shè)置背景圖片</view>
2017年3月7日 10:14