html5 - 如何讓背景圖在手機端全螢幕顯示（內容比較長，有捲軸），確保圖片不變形的狀況？

Question

我的手機端網頁需要背景圖，怎麼才能讓背景圖全螢幕顯示，而且不變形呢 ？
我現在的設置，背景是變形的！求大神！

#

Answer 1

背景大小：100% 自動；

Answer 2

你可以嘗試不設定背景圖，而是使用img標籤來顯示背景圖片。

<p class="page">
    <img class="bg"/>
    <p class="page_Con">
    </p>
</p>

.page{position:relative;height: 100%;overflow:auto;}
.bg{width:100%;height:100%;}
.page_Con{position:absolute;top:0;left:0;width:100%;height:100%;}

Answer 3

background-size：cover；你要先在body和HTML 中設定width

Answer 4

既不拉伸圖片又要完全展示，真是執著於這個的話，給設計提個參考方案吧：
把圖片的輪廓羽化後，加個背景色，再去拿到圖片背景色的色值，在main_bg中設定css屬性：

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;