时间:2021-07-01 10:21:17 帮助过:62人阅读
background-size:200px 100px;background-size:50% 50%;background-size:auto;
下面对Background-size属性的参数做一下简单的介绍:
如果只有一个参数,那么此值用来规定背景图片的宽度,这个时候背景图片的高度值是按照宽度进行等比例缩放。
如果提供两个参数,那么第一个参数用来规定背景图片的宽度,第二个参数用来规定背景图片的高度。
代码实例如下:
蚂蚁部落
Background-size属性带有两个参数,第一个参数规定背景图片的宽度为200px,第二个参数规定背景图片的高度为100px。
再看一段代码实例:
蚂蚁部落
以上代码中,Background-size属性之规定了一个参数,那么这个参数用来规定背景图片的宽度,背景图片的高度根据宽度值进行等比例缩放,如果背景图片的尺寸超过容器,将会被裁切。
Background-size属性值如果是auto的时候,就是背景图片按照原尺寸显示,这里就不用实例演示了。
下面再来介绍一下此属性的cover和contain属性值。
一.cover属性:
将属性值设置为cover之后,将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器,不过超出的部分将会被裁切。
cover的英文也有覆盖的意思,说这一点就是有助于大家的记忆和理解。
代码实例如下:
蚂蚁部落
在以上代码中,背景图片可以最小程度的完全覆盖容器,如果背景图片的和容器的长宽比例不一样,那么必然会出现在横向或者纵向上超出容器的情况,那么超出的将会被隐藏。
一.contain属性:
此属性值可以将背景图片放大或者缩小。
和cover属性类似,都是可以将图片等比例放大或者缩小,但是cover是最小限度的将容器的覆盖,而contain只是要求某一个方位上将容器覆盖,比如纵向或者横向能够最小程度将容器覆盖。
代码示例如下:
蚂蚁部落
在以上代码中,背景图片进行了等比例缩放,由于在纵向上能够最先达到填充容器元素,所以在横向上就放弃尝试。
原文地址是:background-size 用法详解 一章节。