Skip to main content

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。
  • 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

参考