盒模型 背景图的固定与裁剪

一个标签在网页中显示可以看成一个盒子，这个盒子分四层结构从外向内分别是外边距(margin)边框(border) 内边距(padding)内容(content)
在body中写个div
div样式如下以及解释

 div{
            /* 盒模型的四层结构 */
            /* 第一层:外边距  影响标签位置*/
            margin: 50px;
            /* 第二次边框  影响标签尺寸*/
            border: 50px solid red;
        /* 第三次：内边距  影响标签尺寸*/
        padding: 50px;
        /* 第四层:内容  标签最里的尺寸*/
        width: 50px; height:50px;
    
        background-color: yellowgreen;
        /* 让背景颜色只在内容区域显示 */
        background-clip: content-box;
    
        /* 内边距和边框会把标签尺寸撑大，如果不想被撑大，可以设置标签盒模型尺寸 */
         /* content-box 默认值，内容盒子，width和高
         设置的是第四层尺寸，内边距和边框向外延伸 */
         box-sizing: content-box;
         /*border-box边框盒子，width 和 height设置的是第二层边框的
          尺寸，边框和内边距向内延伸，压缩内容 */
         box-sizing: border-box;
        }

背景图

 background-repeat: no-repeat;
        /*背景图相对浏览器窗口固定，不随网页滚动而滚动*/
         background-attachment: fixed;
        /* 背景裁剪  默认border-box边框盒子 背景显示区域
        以边框的外边界为边界，延伸到边框*/
        background-clip: border-box;
        /* 背景显示区域以内容边界(也就是内边距与内容交界处)为边界 */
        background-clip: content-box;
        /* padding-box 内边距盒子 背景显示区域以内边距外边界(边框与内边距交界处)为边界*/
        background-clip:padding-box;
         /*背景尺寸*/
         /* cover 覆盖: 背景图把整个标签包裹，最多显示一张背景图，
         一般，只能显示高度或宽度，图片不能完整显示 */
         background-size: cover;
         /* contain 包含: 标签包含整张背景图，至少要显示一张完整的图片
         一般情况下宽度或高度上会重复显示 */
         background-size: contain;