鍍金池/ 問(wèn)答/HTML/ 微信小程序中首頁(yè)背景圖片占滿整個(gè)屏幕實(shí)現(xiàn)方法

微信小程序中首頁(yè)背景圖片占滿整個(gè)屏幕實(shí)現(xiàn)方法

已經(jīng)將background的width和height在css中設(shè)置為100%，用了absolute.

clipboard.png
小程序界面首頁(yè)圖片沒(méi)有填充滿。

clipboard.png

回答
編輯回答
還吻

image有默認(rèn)的寬度跟高度的

2018年8月3日 06:45
編輯回答
孤島

wxml

 <view class="test-bg">
    <image src="" class="bg-image" mode="scaleToFill"></image>
  </view>

wxss

  page{
    width: 100%;
    height: 100%;
  }
  .test-bg{
    width: 100%;
    height: 100%;
    background-color: #70c7da;
  }
  .bg-image{
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
  }

效果

clipboard.png

自己把圖片地址填上，就是全屏鋪滿的背景圖了！

2017年2月26日 14:19
編輯回答
笑浮塵

試試這個(gè)

background-size: contain;

其實(shí)對(duì)于圖片背景，我的建議是：

<div class="bg-box">
    <img src="">
</div>

.bg-box{
    position: relative; //absolute也行
    width : 100%;
    height : auto;
    box-sizing: border-box;
}

.bg-box img{
    display:block;
    max-width: 100%;
}
2017年3月24日 00:34