想達到全螢幕的背景圖

並且還要隨著視窗的大小跟著縮放~

可以利用CSS來達成

而不同瀏覽器支援也有差別

以下範例為CSS2及CSS3的寫法

兩個摻在一起是不是更相容呢?其實我也不知道XD

所以僅供參考

使用語法:CSS2

適用瀏覽器:Firefox 3.6+、Chrome 8+、IE 7+、Safari 3+、Opera 10+

<style>
html { 
background: url(image/index/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/bg.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/bg.jpg', sizingMethod='scale')"; 
}
</style>

 

使用語法:CSS3

適用瀏覽器:IE9+、Chrome、Firefox、Safari、Oprea

<style>
body {
margin:0;
padding:0;
background: #000 url(image/bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}		
</style>

 


發表自: 九五二七九五二七
愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機玩到PS4,從386打到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華混到NOVA,從遊戲滾到動漫,從攝影器材爬到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD

覺得讚想推薦或分享嗎?