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不喜欢网络开发者

Answer 2

这不适用于＆lt; = 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;
}

CSS图像背景定位

2 个答案: