css-background属性大解析

background:background-color || background-image|| background-position [ / background-size]? || background-repeat || background-attachment || background-origin || background-clip

• background-color：设置元素的背景颜色
  • 默认值 ：transparent
• background-position：设置背景图像的起始位置
  • 默认值：0% 0%
  • 语法：background-position:<position> <position>]
  • 第一个值规定水平位置，第二个值规定垂直位置
  • 第二个值可选,默认50%;如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%
  • background-position提供四个参数值:每个percentage或length值的前面必须提供关键词（即top、bottom、left、right、center）来指定相对偏移的方向。如background-position:right 10px bottom 20px; 表示相对右边界向左偏移10px，相对底边界向上偏移20px，不包含边框
• background-size：设置背景图像的尺寸
  • 默认值：auto
  • 语法： background-position:length|percentage|cover|contain
    • length([width,height='auto'])
    • percentage([width,height='auto']):以父元素的百分比来设置背景图像的宽度和高度
    • cover: 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
      • background-size：100%;: 总是X轴100%铺满整个容器，Y轴可能被裁剪会出现空白填不满部分，图片不变形, 可能表现为 cover 或者 contain
    • contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
  • 设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔，如background-size: 50% 25%, contain, 50px;
• background-repeat：设置是否及如何重复背景图像
  • 默认值：repeat
  • 语法： background-position:<repeat-style> [<repeat-style>]; ，可设置两个值，第二个值可选；第一个用于横向，第二个用于纵向。；
  • 可能的值：
    1. repeat-x：背景图像在横向上平铺
    2. repeat-y：背景图像在纵向上平铺
    3. repeat：背景图像在横向和纵向平铺
    4. no-repeat：背景图像不平铺
    5. round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
    6. space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
• background-origin：background-position 属性相对于什么位置来定位。
  • 默认值：padding-box
  • 语法：background-origin: padding-box|border-box|content-box;
    1. border-box：从border区域（含border）开始显示背景图像。
    2. padding-box：从padding区域（含padding）开始显示背景图像。
    3. content-box：从content区域开始显示背景图像。
• background-clip：规定背景的绘制区域
  • 默认值：border-box
  • 可能的值：
    1. border-box：从border区域（不含border）开始向外裁剪背景。
    2. padding-box：从padding区域（不含padding）开始向外裁剪背景。
    3. content-box：从content区域开始向外裁剪背景。
    4. text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    

  • background-clip只是将背景和背景色粗暴的裁剪
• background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
  • 默认值：scroll
  • 语法：background-attachment : fixed | scroll | local;
    1. fixed：背景图像相对于窗体固定。
    2. scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    3. local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
• background-image：为元素设置背景图像
  • 默认值：none
  • 语法：background-image: url() | none | inherit;
  • 一张图片：background-image: url(img/a.jpg);多张图片：background-image: url(img/a.jpg),url(img/b.jpg),如且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上;
• background-blend-mode: 把两种（及以上）的背景进行混合
  • 语法： `background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

  /* 单值 */
  background-blend-mode: normal;
   
  /* 双值，每个背景一个值 */
  background-blend-mode: darken, luminosity;
   
  background-blend-mode: initial;
  background-blend-mode: inherit;
  background-blend-mode: unset;
  

• background-position-x、background-position-y ：
  • 语法：background-position-x : length | left | center | right;, background-position-y : length | left | center | right

background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔, 其中背景颜色不能设置多个且只能放在最后一组。