background-size
background-size
background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
通过 background 声明
/* 关键字 */
background-size: cover
background-size: contain
/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值 */
/* 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗号分隔的多个值:设置多重背景 */
background-size: auto, auto /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;
语法
单张图片的背景大小可以使用以下三种方法中的一种来规定:
- 使用关键词
contain
- 使用关键词
cover
- 设定宽度和高度值
当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:
- 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为 auto。
- 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。