CSS3 background-size 属性

语法

描述
length 设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

上边的4个值,前2个很好理解,我主要说一下后2个。

cover

.bgcss{background-size:cover;}

按宽高比例无限拉伸或压缩背景图片,使其占满整个背景区域。如果宽高比例不一样的话,背景图片只会显示一部分。


contain

.bgcss{background-size:contain;}

如果宽高比例不一样的话,背景图片会完全显示,但是不会占满整个背景区域,只能是宽或高其中的一个和背景区域的宽或高相同。看下边的图片显示就理解了。

background-size的contain特定值会保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域。

1)在背景图片宽高比例和背景区域的宽高比例一样的情况下,背景图片会拉伸或缩放铺满整个背景区域。
比如背景图片的宽和高分别为500 * 500, 背景区域的宽和高为400 *400。它俩的比例都是1:1,那么背景图片会自动缩放为400 * 400占满整个背景区域。
同理,反过来,如果背景图片的宽和高分别为400 * 400, 背景区域的宽和高为500 *500。那么背景图片会自动拉伸为500 * 500占满整个背景区域。

2)如果背景图片和背景区域的宽高比例不一样,那么背景图片会自动缩放到宽度高度正好适应定义背景的区域


Ps:在背景区域宽高不确定的情况下,建议用cover


我们可以通过下图来看出4个属性值的区别:

CSS3 background-size

Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注