背景样式，overflow

1. 使用场景

保证图片不变的情况下使用

2. 用法

（1）背景颜色 background-color: red;
（2） 背景图片 background-image: url(./images/1.jpg);
（3）背景位置 background-position : 100px 100px （左上）
center 背景居中

（4）背景大小 background-size: 100px 100px;

cover: 图片等比缩放直到刚好覆盖背景区域
contain: 图片等比缩放,直到有一条边触碰到边框就停止

5. 背景平铺

默认处于平铺状态，使用时不平铺
background-repeat: repeat no-repeat; （x方向平铺，y方向不平铺）

        div {
            width: 1200px;
            height: 600px;
            background-image: url('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1600570336&di=3232ecf53c57b44a13a0d4157e6f338e&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg');
            background-size: 100px 100px;
            /* background-repeat: no-repeat repeat; */
        }

7. 背景图片显示基点

默认情况下：
背景不平铺：基点在边框线外边距开始
背景平铺： 基点在边框线内边距开始

背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置

content-box: 背景图片内容区左上角开始（内容区域开始）

padding-box: 背景图片从内边距左上角开始（padding开始）

border-box: 背景图片相当于边框左上角开始（边框左上角）

8. 背景图片裁剪（background-clip）

背景图片从开始裁切: background-clip

content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片(默认)
border-box: 显示内容区、内边距和边框部分的图片

9. 背景图片关联依附

背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。
fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

10. overflow 样式

overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理
（1）overflow：visible;（默认）超出部分正常显示

（2）overflow: hidden; 超出部分隐藏

（3）overflow: scroll; 超出部分以滚动条显示

（4）auto 自动适应

11. 复合样式写法

背景是复合属性:
background: color image repeat attachment position/size；
如： background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
省略部分会被默认值替代,
position和size之间要用/分割

颜色 路径 平铺 依附  位置 / 尺寸