html5 - 如何讓背景圖在手機端全螢幕顯示(內容比較長,有捲軸),確保圖片不變形的狀況?
为情所困
为情所困 2017-05-16 13:25:30
0
4
1075

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

#
为情所困
为情所困

全部回覆(4)
小葫芦

背景大小:100% 自動;

过去多啦不再A梦

你可以嘗試不設定背景圖,而是使用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%;}
巴扎黑

background-size:cover;你要先在body和HTML 中設定width

给我你的怀抱

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

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!