- 發文於
- • 無分類
使用CSS2及CSS3實現自動縮放全螢幕背景圖
- 作者
-
-
- 使用者
- xd9527
- 發表自
- 發表自
-
想達到全螢幕的背景圖
並且還要隨著視窗的大小跟著縮放～
可以利用CSS來達成
而不同瀏覽器支援也有差別
以下範例為CSS2及CSS3的寫法
兩個摻在一起是不是更相容呢？其實我也不知道XD
所以僅供參考
--summary--
使用語法：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>