CSS背景

简写

在 CSS2.1 里， background 属性的简写方式包含五种属性值，从 CSS3 开始，又增加了 3 个新的属性值，加起来一共 8 个。
CSS2.1

  • background-color ：背景颜色
  • background-image ：背景图像
  • background-repeat ：如何重复背景图像
  • background-attachment ：背景图像是否固定或者随着页面的其余部分滚动
  • background-position ：背景图像的位置

CSS3

  • background-size ：背景图像的尺寸
  • background-origin ：背景图像的定位区域
  • background-clip ：背景的绘制区域
  1. background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip]

background-size

设置背景图片的大小：

  • 图片可以把保持原有的尺寸
  • 拉伸到新的尺寸
  • 保持其原有比例的同时缩放到元素的可用空间的尺寸

值

  • cover ：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中（按比例，多余的裁切）
  • contain ：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（按比例，有可能出现白边）
  • 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto
  • 两个值：第一个值指定图片的宽度，第二个值指定图片的高度
  • 逗号分隔的多个值：设置多重背景

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

值

  • scroll ：默认值。背景图像会随着页面其余部分的滚动而移动。背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）
  • fixed ：当页面的其余部分滚动时，背景图像不会移动
  • local ：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框

background-position

背景定位，精确控制背景在对象中的位置

  • 偏移量长度可以是正值，也可以是负值。 x 为正值表示向右偏移，负值表示向左偏移； y 为正值表示向下偏移，负值表示向上偏移
  • 如果提供两个值，第一个长度或百分比表示水平偏移，第二个长度或百分比表示垂直偏移
  • 默认情况下， background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left默认指的是 padding box 的左上角
  • background-origin 可以改成 content-box ，这样 background-position 就是以 content box 为基准了。

background-origin

规定 background-position 属性相对于什么位置来定位。

值

  • padding-box ：默认值
  • content-box

    background-clip

    设置元素的背景是否延伸到边框下面

值

  • border-box ：背景延伸至边框外沿（但是在边框下层）
  • padding-box ：背景延伸至内边距（padding）外沿，不会绘制到边框外
  • content-box ：背景被裁剪至内容区（ content box ）外沿
  • text ：背景被裁剪成文字的前景色