溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)web開發(fā)中有哪些方法使背景圖片占據(jù)整個屏幕，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
一直在關(guān)注這個問題（其實是因為壓根就是初學(xué)者.....
就現(xiàn)在了解有幾種方法：
①CSS處理方法（僅IE）
代碼如下:
#backGroundImg {
background-image: url("X.png");
background-repeat: no-repeat;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上這個，詳細可Google*/
}
②把背景圖片做的足夠大；
一般情況下，我們設(shè)計給我的圖都是1440*900的極限，然后居中顯示就會適應(yīng)大部分的屏幕了?？墒乾F(xiàn)在顯示器越來越大，加上Mac下Retina屏超高分辨率的虐待...當分辨率超過背景圖大小時，邊上就會變成背景色了。
所以最直觀的方法就是將背景圖的大小，翻倍，翻倍，再翻倍....只要超過主流瀏覽器最大分辨率就好了。
不過弊端很明顯，過大的圖片會極大的影響網(wǎng)頁的加載速度。
③用Js/jQuery控制大?。ㄟ@其實是種假象的背景自適應(yīng)）
利用加入個<img>標簽，將z-index設(shè)置的低一些，然后用Js/jQuery監(jiān)視窗口大小，然后改變圖片的長寬就好了。（詳細Google）
不過，這種方法，當圖片被拉伸或壓縮的過于嚴重的時候會非?？膳碌?....
而且，如果屏蔽右鍵功能會很蛋疼；不屏蔽右鍵功能就露怯了。
④利用<img>元素自適應(yīng)。
這個其實和③差不多，如果是整個網(wǎng)頁的背景，在起始<body>后馬上加上<img>然后將CSS設(shè)置
width:100%;
height:100%;
這樣，圖片就會隨著瀏覽器的放大縮小自動縮放了。弊端也和③差不多。
看完上述內(nèi)容，你們對web開發(fā)中有哪些方法使背景圖片占據(jù)整個屏幕有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責聲明：本站發(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)容。
億速云公眾號
手機網(wǎng)站二維碼
