CSS圖像背景定位

Question

我想按寬度拉伸背景，但是其高度大小根據內容而變化。 如果內容太小，則背景將被截斷。 否則，如果有很多信息，背景應該平穩過渡為黑色。 所以我有：

body {
margin: 0; padding: 0;  
height:1000px;

background: url(images/background.jpg) no-repeat #000;

width: 100%;
background-position: left top; 
background-size: 100% 1000px;
}

但是它有固定的大小。 我試圖將height更改為自動，但是根本沒有顯示背景。 是否有可能做到這一點？ 謝謝。

Answer 1

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

在大多數瀏覽器中應該足夠容易地工作。

對於IE：

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

IE不喜歡Web開發人員

Answer 2

這在<= IE8中不起作用，但是，有一個特定於IE的過濾器可以完成此工作：

html {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_image.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_image.jpg', sizingMethod='scale')";
    zoom:1;
}