CSS设置背景

62 阅读1分钟

CSS设置背景

background-image

background-image用于设置元素的背景图片,会盖在(不是覆盖)background-color的上面。如果设置了多张图片,设置的第一张图片将显示在最上面,其他图片按顺序层叠在下面。

注意:如果设置了背景图片后,元素没有具体的宽高,背景图片是不会展示出来的。

background-repeat

background-repeat用于设置背景图片是否要平铺。

常见的值有:

  • repeat:平铺
  • no-repeat:不平铺
  • repeat-x:只在水平方向平铺
  • repeat-y:只在垂直平方向平铺

background-size

background-size用于设置背景图片的大小。

  • auto:默认值, 以背景图本身大小显示
  • cover:缩放背景图,以完全覆盖铺满元素,可能背景图片部分看不见
  • contain:缩放背景图,宽度或者高度铺满元素,但是图片保持宽高比
  • <percentage>:百分比,相对于背景区(background positioning area)
  • length:具体的大小,比如100px

background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置。可以设置具体的数值 比如 20px 30px。水平方向还可以设置:left、center、right。垂直方向还可以设置:top、center、bottom。如果只设置了1个方向,另一个方向默认是center。