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;
}