我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。

我在Stack Overflow上看到过一些问题,比如拉伸和缩放CSS背景。它工作得很好,但我想使用背景放置图像,而不是使用img标签。

在其中放置了一个img标签,然后用CSS向img标签致敬。

width:100%; height:100%;

它的工作,但这个问题有点老了,并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子,但它不适合我。

是否有一个好的方法来做背景图像声明?


当前回答

您可以使用CSS3属性很好地做到这一点。它会根据比例调整大小,因此不会产生图像失真(尽管它会放大小图像)。请注意,它还没有在所有浏览器中实现。

background-size: 100%;

其他回答

使用我提到的代码…

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

这就产生了预期的效果:只有内容会滚动,背景不会滚动。

背景图像根据浏览器视口的大小调整为任何屏幕大小。当内容不适合浏览器视口时,用户需要滚动页面,当内容滚动时,背景图像在视口中保持固定。

使用css3,这似乎会容易得多。

我使用了background- x CSS属性的组合来实现理想的缩放背景图像。

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

这使得背景总是覆盖整个浏览器窗口,并在缩放时保持居中。

如果你想让内容水平居中,可以使用这样的组合:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

看起来会很漂亮。

使用下面的CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

实际上,您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低,设置position:absolute,并为前景中的每个盒子使用透明背景。