2020-12-28背景

1、背景颜色
    background-color:16进制、rgb、rgba、英文拼写、hsl函数表示法
    opacity（透明度）alpha（颜色通道透明度）的区别，opacity可以给content添加透明度，
alpha只能给当前设置的背景颜色添加透明度
2、visibility:visible
    visibility:hidden
    display:none
    1、空间占据：display：none隐藏后不占据空间，会出现重排重绘现象
        visibility:hidden、opacity：0元素虽然隐藏了，但是仍然占据空间，指挥引起页面重绘
    2、子元素的继承：display:none不会被子元素继承，但是父元素都不会在了，那么子元素自然而然也不会显示了
            visibility:hidden会被子元素继承，可以通过设置属性样式为visible使子元素显示出来
            opacity：0会被子元素继承，但不能通过设置opacity=1使其重新显示
3、什么时候插入内容图，什么时候插入背景图

4、background-repeat（图片重复）：repeat-x（沿x轴方向平铺）、repeat-y（沿y轴方向平铺）、no-reapeat（不重复、不平铺）
5、background-size（图片大小）：100 100（按照给定的宽高进行变化）
                    100% 100%（百分比不是相对于图片的固定大小、而是相对于容器大小）
                     100% auto（我们可以让图片的宽度（X值）始终保持的着100%，高度等比例缩放，保持自己规定的宽高比）
                     auto auto（没有意义。跟原大小一样）
                     100%（只写一个100%时，第二个值默认是auto ）
                     cover（覆盖盒子的所有空间，不留白，图片可能会裁切）
                     contain（等比例放大和缩小，一条触碰到边框就会停止，图片会全部展示，不会超过盒子）
6、background-origin（显示基点）：padding-box（默认值）
                               content-box（相对于内容区）
                               border-box（相对于边框）
7、background-clip（背景裁切）：border-box（默认值）
                    content-box（相对于内容区）
                    padding-box（相对于内边距区）
8、background-attacment：决定背景是在视口固定还是随着包含他的区块滚动
            fixed（表示背景相对于视口固定，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动）
            scroll（表示背景相对于元素本身固定，而不是随着他的内容滚动）
9、复合型背景样式写法：
    background:red url(images/1.png) no-repeat scroll 20px 20px（position）/30px 30px（size）;
    省略部分会被默认值替代
    position和size之间要用/分割
10、background-position：（定位在左上角，向右偏移是x，向下偏移是y）（可以理解为坐标）