#background-size 做用: 此属性是改变背景尺寸的code
经过各类不一样是属性值改变背景尺寸呈现的大小图片
#Background-size的语法容器
一、Background-size的语法
复制代码代码以下:
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
Background-size的属性值
- auto:此值为默认值,保持背景图片的原始高度和宽度;
- number:此值设置具体的值,能够改变背景图片的大小;
- percentage:此值为百分值,能够是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
- cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又没法使用background-repeat来实现时,咱们就能够采用cover;将背景图片放大到适合容器的大小,但这种方法会使用背景图片失真;
- contain:此值恰好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器,这个主要运用在,当背景图片大于元素容器时,而又须要将背景图片所有显示出来,此时咱们就能够使用contain将图片缩小到适合容器大小为止,这种方法一样会使用图片失真。
- 当background-size取值为number和percentage时能够设置两个值,也能够设置一个值,当只取一个值时,第二个值至关于auto,但这里的auto并不会使背景图片的高度保持本身原始高度,而会与第一个值相同。