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

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

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

width:100%; height:100%;

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

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


当前回答

使用Backstretch插件。甚至可以有几张图片幻灯片。它也可以在容器中工作。这种方式,例如,一个可以只有背景的一部分被背景图像覆盖。

因为即使我可以让它工作,证明它是一个易于使用的插件:)。

其他回答

您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。

我以前做过这个,并不难。此外,我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像,它会减慢缓慢的电脑和浏览器。

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

background-size: 100%;

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

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

看起来会很漂亮。

使用下面的CSS:

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

CSS3有一个漂亮的小属性,叫做background-size:cover。

这将缩放图像,使背景区域完全被背景图像覆盖,同时保持纵横比。整个区域将被覆盖。但是,如果调整后的图像的宽度/高度太大,则部分图像可能不可见。