css 背景属性 background.txt

css 背景属性 background.txt
参考：https://www.w3school.com.cn/cssref/pr_background.asp

1、背景颜色
  属性：background-color
  取值：合法的颜色值
  注意：背景颜色是从边框位置处开始绘制的。
2、背景图像
  属性：background-image
  取值：
     1、默认值为 none
     2、url(图片路径)
  ex:
     background-image:url(image/a.jpg);
3、背景平铺
  属性：background-repeat
  取值：
     1、repeat
        默认值，横向纵向都平铺
     2、no-repeat
        不平铺
     3、repeat-x
        只在横向平铺
     4、repeat-y
        只在纵向平铺
4、背景图片尺寸
  属性：background-size
  取值：
     1、width height
        以px为单位
     2、width% height%
        使用当前元素的尺寸占比作为尺寸。
     3、cover
        覆盖，将背景图进行等比缩放，直到覆盖到元素的所有区域为止。
     4、contain
        包含，将背景图进行等比缩放，直到碰到元素的一个边缘为止。
5、背景图片固定
  1、作用
     将背景图固定在body的某个位置处，不会随着滚动条而发生位置的更改。
  2、属性
     background-attachment
     取值：
        1、scroll ：默认值，背景图会滚动
        2、fixed ：背景图固定
6、背景图片位置
  1、作用
     改变背景图像在网页中的默认位置
  2、属性
     background-position
     取值：
        1、x y
           以px为单位的数值，用空格隔开
           x ：背景图像的水平偏移位置
              取值为正，元素向右偏移
              取值为负，元素向左偏移
           y ：背景图像的垂直偏移位置
              取值为正，元素向下偏移
              取值为负，元素向上偏移
        2、x% y%
        3、关键字
           x ：left / center / right
           y ：top / center /bottom

           ex:
              background-position:left bottom;
              background-position:top center;
              background-position:center;
7、背景属性
  1、作用
     在一个属性中，设置所有的背景属性。
     通常建议使用这个属性。
  2、语法
     属性：background
     取值：color url() repeat attachment position;
     注：经测试，background貌似只支持这5种属性的设置。

     background:red;
     background:url(a.png) 16px -35px;
8、个人理解：
  background-image，不占页面空间。
  如果某个块级元素，单独设置该属性，需设置width, height，该背景图片才有空间显示。
  利用该属性 background-image:url(image/a.jpg); + background-size:contain;
  + width,height也可也在某个块级元素内完全展示该图片，而不出现滚动条。