html5 - 如何讓背景圖在手機(jī)端全屏顯示(內(nèi)容比較長,有滾動(dòng)條),保證圖片不變形的情況?
問題描述
我的手機(jī)端網(wǎng)頁需要背景圖,怎么才能讓背景圖全屏顯示,而且不變形呢 ?我現(xiàn)在的設(shè)置,背景是變形的!求大神!
問題解答
回答1:background-size:100% auto;
回答2:你可以嘗試不設(shè)置背景圖,而是使用img標(biāo)簽來顯示背景圖片。
<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 中設(shè)置width
回答4:既不拉伸圖片又要完全展示,真是執(zhí)著于這個(gè)的話,給設(shè)計(jì)提個(gè)參考方案吧:把圖片的輪廓羽化后,加個(gè)背景色,再去拿到圖片背景色的色值,在main_bg中設(shè)置css屬性:
background-color: white;// 拿到的圖片背景色background-image: url(’鏈接’);background-size: 95%; //可以寫成固定值background-repeat: no-repeat;background-position: center;
