文章詳情頁

html5 - 如何讓背景圖在手機端全屏顯示（內容比較長，有滾動條），保證圖片不變形的情況？

瀏覽：147日期：2023-06-21 14:50:56

問題描述

我的手機端網頁需要背景圖，怎么才能讓背景圖全屏顯示，而且不變形呢？我現在的設置，背景是變形的！求大神！ html5 - 如何讓背景圖在手機端全屏顯示（內容比較長，有滾動條），保證圖片不變形的情況？

問題解答

回答1：

background-size:100% auto;

回答2：

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

<p class='page'> <img /> <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%;}回答3：

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

回答4：

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

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