html - CSS图片背景定位

Question

我想按宽度拉伸(stretch)背景，但它的高度大小会根据内容而变化。如果内容太小，背景应该被截断。否则，如果有很多信息，背景应该平滑过渡到黑色。所以我有:

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 更改为 auto，但背景根本没有显示。 是否有可能做到这一点？ 谢谢。

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 开发者