背景圖片佔滿整個螢幕
阿新 • • 發佈:2019-01-28
①CSS處理方法(僅IE)
複製程式碼 程式碼如下:
#backGroundImg {
background-image: url("X.png");
background-repeat: no-repeat;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上這個,詳細可Google*/
}
②把背景圖片做的足夠大;
一般情況下,我們設計給我的圖都是1440*900的極限,然後居中顯示就會適應大部分的螢幕了。可是現在顯示器越來越大,加上Mac下Retina屏超高解析度的虐待...當解析度超過背景圖大小時,邊上就會變成背景色了。
所以最直觀的方法就是將背景圖的大小,翻倍,翻倍,再翻倍....只要超過主流瀏覽器最大解析度就好了。
不過弊端很明顯,過大的圖片會極大的影響網頁的載入速度。
③用Js/jQuery控制大小(這其實是種假象的背景自適應)
利用加入個<img>標籤,將z-index設定的低一些,然後用Js/jQuery監視視窗大小,然後改變圖片的長寬就好了。(詳細Google)
不過,這種方法,當圖片被拉伸或壓縮的過於嚴重的時候會非常可怕的.....
而且,如果遮蔽右鍵功能會很蛋疼;不遮蔽右鍵功能就露怯了。
④利用<img>元素自適應。
這個其實和③差不多,如果是整個網頁的背景,在起始<body>後馬上加上<img>然後將CSS設定
width:100%;
height:100%;
這樣,圖片就會隨著瀏覽器的放大縮小自動縮放了。弊端也和③差不多。
複製程式碼 程式碼如下:
#backGroundImg {
background-image: url("X.png");
background-repeat: no-repeat;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上這個,詳細可Google*/
}
②把背景圖片做的足夠大;
一般情況下,我們設計給我的圖都是1440*900的極限,然後居中顯示就會適應大部分的螢幕了。可是現在顯示器越來越大,加上Mac下Retina屏超高解析度的虐待...當解析度超過背景圖大小時,邊上就會變成背景色了。
所以最直觀的方法就是將背景圖的大小,翻倍,翻倍,再翻倍....只要超過主流瀏覽器最大解析度就好了。
不過弊端很明顯,過大的圖片會極大的影響網頁的載入速度。
③用Js/jQuery控制大小(這其實是種假象的背景自適應)
利用加入個<img>標籤,將z-index設定的低一些,然後用Js/jQuery監視視窗大小,然後改變圖片的長寬就好了。(詳細Google)
不過,這種方法,當圖片被拉伸或壓縮的過於嚴重的時候會非常可怕的.....
而且,如果遮蔽右鍵功能會很蛋疼;不遮蔽右鍵功能就露怯了。
④利用<img>元素自適應。
這個其實和③差不多,如果是整個網頁的背景,在起始<body>後馬上加上<img>然後將CSS設定
width:100%;
height:100%;
這樣,圖片就會隨著瀏覽器的放大縮小自動縮放了。弊端也和③差不多。