CSS背景图像

CSS背景图像

background背景

主要属性：

• background-color
  

  ：背景颜色，简写

  background
  

  • 不能继承，默认是transparent
  • inherit 指定背景颜色，从父元素继承

• background-image
  

  ：背景图片

  • url：图片URL地址
  • node：默认值 背景上未放置图片
  • inherit：指定背景图片从父元素继承
  • 一个元素可以引入多张背景图片；
    • 指定要使用的一个或多个背景图片，默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向
  • 属性不能继承

• background-repeat
  

  ：背景重复

  • 默认重复background-image的垂直和水平方向
  • repeat 默认
  • repeat-x 只有水平位置重复
  • repear-y 只有垂直位置重复
  • no-repeat 不重复
  • inherit 从父元素继承

• background-position
  

  ：背景定位

  • 设置背景图片的起始位置
  • x、y 水平位置，垂直位置。左上角是0。单位（px，关键字，百分数）
  • 关键字成对出现left right top bottom center，仅指定一个关键字，其他值将会是center
  • 只设定x轴方向，默认y轴为center
  • inherit 从父元素继承

• background-attachment
  

  ：背景关联

  • 设置背景图片固定或随页面的其余部分滚动
  • scroll 默认
  • fixed 固定
  • inherit 从父元素继承

• background-size
  

  ：背景图像的尺寸大小

  • `` 长度值指定图像大小。不允许负值
  • `` 百分比指定图像大小。不允许负值
  • auto 图像的真实大小
  • cover 将背景图像等比例缩放到完全覆盖容器，有可能超出容器
  • contain 等比例所放到宽/高与容器的宽/高相等，背景图像始终被包含在容器内

• background-origin
  

  ：设置背景图像的参考原点（位置）

  • padding-box：从padding区域（含padding）开始显示背景
  • border-box：从border区域（含border）开始显示背景
  • content-box：从content区域开始显示背景

• background-clip
  

  ：设置对象的背景图像向外裁剪的区域

  • padding-box：从padding区域（不含padding）开始向外裁剪背景
  • border-box：从border区域（不含border）开始向外裁剪背景
  • content-box：从content区域开始向外裁剪背景
  • text：从前景内容的形状（比如文字）作为裁剪区向外裁剪，实现使用背景作为填充色之类的遮罩效果。

• 雪碧图：background-position: x y

https://whjin.github.io/frontend-dev-doc/
内容来前端开发文档 写是为了方便监督我看一遍