拉伸和缩放CSS背景

有什么方法可以让CSS中的背景拉伸或缩放以填充其容器?

目前没有。它将在CSS 3中出现,但在大多数浏览器中实现之前还需要一些时间。

评论(5)

一句话:不行。伸展图片的唯一方法是使用``标签。你必须要有创造性。

在2008年写这个答案的时候,这曾经是真的。今天,现代浏览器支持background-size,解决了这个问题。请注意,IE8并不支持它。

评论(1)

定义"拉伸和缩放"...

如果你有一个位图格式,一般来说,拉伸它和拉动它并不是很好(从图形上讲)。 你可以使用可重复的图案来产生相同效果的幻觉。 例如,如果你有一个向页面底部变浅的渐变,那么你可以使用一个与你的容器相同高度的单一像素的图形(或者最好更大,以考虑到缩放),然后将它铺满整个页面。 同样地,如果梯度贯穿整个页面,它将是一个像素的高度,比你的容器宽,并在页面上重复。

通常情况下,为了给人一种错觉,即当容器增长或缩小时,它将被拉伸以填满容器,你将使图像大于容器。 任何重叠的部分都不会显示在容器的范围之外。

如果你想要一个依赖于像带有弧形边缘的盒子的效果,那么你会把盒子的左边贴在容器的左边,并有足够的重叠,(在合理范围内)无论容器有多大,它都不会用完背景,然后你把带有弧形边缘的盒子的右边的图像分层,并把它放在容器的右边。 这样,随着容器的收缩或增长,弧形盒子的效果似乎也会随之收缩或增长--事实上并没有,但它给人的错觉就是这样的。

至于真正使图像随容器收缩和增长,你需要使用一些分层技巧,使图像看起来像一个背景,并使用一些JavaScript来调整它与容器的大小。 目前还没有办法用CSS做到这一点......

如果你使用的是矢量图,恐怕你已经超出了我的专业领域。

评论(2)