網上查了很多關于如何全屏的，最搓的平鋪，還有的則用濾鏡....

這里我提供一個我個人比較喜歡的解決方案


html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


該方法適用于的瀏覽器：
Safari 3+
Chrome 任意版本
IE 9+
Opera 10+
Firefox 3.6+


此處有一個缺憾，對于國內這種動不動就IE的人你傷不起，所以我們還是要針對IE做一個解決方案


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

注：IE的解決方案少部分在使用的時候出現了一些導致頁面掛掉的情況。

總結

以上是生活随笔為你收集整理的html背景图片全屏效果的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。