background 一些细节

background 一些细节

background-origin

  • 指定 background-image 的定位起点,默认值为 padding-box
  • background-attachment: fixed 时会导致 background-origin 属性无效

background-clip

  • 控制 background-image 的展示区域,默认值为 border-box

background-position

  • 设置 background-image 相对于 background-origin 的位置,默认值为 0% 0%top left

  • 如果只指定一个值,则第二个值默认为 center

  • background-position 值为百分比时,是相对于 (元素 background-origin 的宽高 - background-image 的宽高)

background-image

  • background-image 的范围为 padding + width
  • 支持配置多张,用 , 隔开
  • background-image 支持线性渐变(linear-gradientrepeating-linear-gradient)

background-size

  • 控制图像尺寸大小,默认值为 auto,显示图像原有尺寸
  • background-size 值为百分比时,是相对于元素的尺寸进行计算
  • background-size: cover 是将图像按照自身比例缩至其中一边等于元素相应边的大小,且另一边也大于等于元素相应边的大小,即把图像缩放到正好能覆盖元素
  • background-size: contain 是将图像按照自身比例缩至其中一边等于元素相应边的大小就行,也就是将图像缩放到可以在元素内部显示整个图像

background-color

  • 默认为 transparent
  • background-color 的范围为 border + padding + width;border 的层级比 background 高,如果 border 颜色为非透明,则会覆盖 background-color
  • 层级顺序:outline > border > background-image > background-color
  • background-color 的渲染区域也会受 background-clip 影响,但不受 background-origin、background-repeat 影响

参考