對(duì)于現(xiàn)代瀏覽器，您可以使用background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;}

cover意思是將圖像垂直地或水平地拉伸，這樣它就不會(huì)平鋪/重復(fù)。

這將適用于Safari 3(或更高版本)，Chrome，歌劇10+、Firefox 3.6+和InternetExplorer 9(或更高版本)。

要使其與InternetExplorer的較低版本一起工作，請(qǐng)嘗試以下CSS：

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

使用CSS 3財(cái)產(chǎn)background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */}

從2012年起，現(xiàn)代瀏覽器就可以使用這一功能了。

使用CSS縮放圖像并不完全可能，但是可以通過以下方式實(shí)現(xiàn)類似的效果。

使用此標(biāo)記：

<div id="background">
    <img src="img.jpg" class="stretch" alt="" /></div>

使用以下CSS：

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;}.stretch {
    width:100%;
    height:100%;}

你就該完蛋了！

為了將圖像縮放為“完全出血”并保持高寬比，您可以這樣做：

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

效果很好！但是，如果一個(gè)維度被裁剪，它將只被裁剪在圖像的一側(cè)，而不是兩邊都被平均裁剪(并且居中)。我在火狐上測(cè)試過，WebKit，以及InternetExplorer 8。