background

background-image

• 背景图片
  • background-image:url()
  • 

• 可以使用渐变颜色

  • background-iamge: linear-gradien(red, yellow)

    渐变颜色只能放到image上，-color不可以使用，例如border-color和background-color

    多个背景图片

• background-image: url() , url();

• 需要配合使用
  • background-size: 第一个图片的尺寸，第二个图片的尺寸，
  • background-postion: 0 0, 100 0；

• 应用场景

  • 一般来说第一张图片都是网络图片加载，第二张图片用来容错，防止第一张图片没有加载出来，那么默认会展示第二张
  • background-image: url(网路图片) url（静态图片）

    background-postion

• 背景图片位置，可以使用像素px百分比% ，center/top/left/right/bottom

• 默认是center
• 参数
  • 参数1为水平方向
  • 参数2为垂直方向
• background-postion : 10 0;
• 根据background-origin设置的位置开始定位

• 如果设置background-origin：border-box

  • 那么设置background-postion：10px 10px那么就会相对于border开始定位

    background-origin

• 一般情况配合background-clip使用

• 图片的起始位置

• 参数

  • border-box 从border位置开始
  • padding-box 从padding位置开始 ——- 默认值
  • content-box 从内容位置开始
  • 
  • 设置背景图片位置从content-box位置开始，并且no-repeat 那么会从content位置开始，但不会根据content位置结束
  • 

    background-clip

• 参数

  • border-box 从border位置剪切掉背景图片 ——-默认值
  • padding-box 从padding位置剪切掉背景图片
  • content-box 从内容位置剪切背景图片
  • text 除文字体以外任何地方不展示图片 相当于文字背景图 只有webkit内核可以使用
    • 需要配合text-fill-color:transparent；使用
    • 

      background-attachment

• 改变背景图片定位属性

• 参数

  • scroll相对于容器进行定位 默认值
  • local 相对于内容区进行定位
  • fixed 相当于可视区视口进行定位, 不会超出父级可视区位置

    background-size

• 设置背景图片大小

• 参数

  • auto 背景图像的真实大小
  • cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
  • contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

    多个参数

• 可以接受1~2个参数cover和contain关键字只接受一个。

• 如果提供两个，第一个用于定义背景图像宽度，第二个定义高度；只提供一个，该值用于定义背景图像的宽度，高度将依据图像宽度定义进行等比缩放计算得到。

• background-size: contain100%;

  background-repeat

• 背景图片平铺

• 参数

  • no-repeat 禁止平铺
  • repeat-x x轴平铺
  • repeat-y y轴平铺
  • round 有平铺空间时平铺，没有平铺空间时拉伸
  • space 有平铺空间时平铺，没有平铺空间时填充空白

    多个参数

• background-repeat: round space

  • 水平方向round，垂直方向space