您好,登錄后才能下訂單哦!
給頁面的某一元素添加背景圖片,當(dāng)沒有指定具體的寬高時,是無法顯示效果的
1、添加背景圖
HTML代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; height:auto; background:url('p_w_picpaths/page.jpg') no-repeat center center; background-size:cover; } </style> </head> <body> <div id="wrap"> </div> </body> </html>
我們可以看看頁面效果截圖:
為了達到適應(yīng)不同終端的屏幕大小,我們又不能把寬高寫死,那怎么辦呢?可以采取以下方法:
HTML代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; height:100%; background:url('p_w_picpaths/page-small.jpg') no-repeat; background-size:cover; position:fixed; z-index:-10; background-position:0 0; } </style> </head> <body> <div id="wrap"> </div> </body> </html>
再來看看頁面效果:
手機頁面效果
注意:如果去掉div,直接把樣式加在body上面的話,在PC端瀏覽器可以顯示,安卓手機里面也可以顯示,但是在蘋果手機里面就無法顯示。多次反復(fù)測試,均重現(xiàn)此bug(如有朋友遇到此類問題的正解,歡迎指教?。?/span>
(上圖為蘋果機型下的截圖)
2、通過img標(biāo)簽添加背景圖
HTML代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} </style> </head> <body> <div id="wrap"> <img class="imgBcground" src="p_w_picpaths/page-small.jpg" alt=""> </div> </body> </html>
查看頁面效果時發(fā)現(xiàn),圖片是以百分百實際大小呈現(xiàn),顯然不是我們想要的效果
跟上面的例子很相像,我們只需要稍加修改就好
HTML代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} .imgBcground{ display:block; width:100%; height:100%; position:fixed; z-index:-10; } </style> </head> <body> <div id="wrap"> <img class="imgBcground" src="p_w_picpaths/page-small.jpg" alt=""> </div> </body> </html>
在不同模擬機型下查看頁面效果均可以實現(xiàn):
關(guān)于background-size屬性,W3C是這么定義的
具體可以查看鏈接:http://www.w3school.com.cn/c***ef/pr_background-size.asp
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。