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