css之background属性

一、background总览

    background属性是所有背景属性的缩写，通常建议在代码中使用该缩写属性，而不是使用多条单独的背景属性，因为该缩写属性在老版本浏览器中支持性更好，而且书写简便。未写在缩写属性中的其他背景属性，则会采用默认值。
    但我个人不提倡一味的使用缩写属性，因为当缩写的属性过多时，会导致这行代码过长，而且可读性也会变差，所以个人建议只在缩写属性中缩写4~6个属性，如果还需要用到其他属性则通过单独背景属性来定义。

/* 代码太长 可读性较差 */
/* 依次设置：bg-color bg-image bg-repeat bg-position/bg-size bg-origin bg-clip bg-attachment  */
 background: #ccc url(./image/img.png) no-repeat 0 0 / 100% 100% border-box border-box fixed;

/* 长度适中 可读性较好 */
/* 依次设置：bg-color bg-image bg-repeat bg-position bg-attachment */
background: #ccc url(./image/img.png) no-repeat 0 0 fixed;
background-size: 100% 100%;
background-origin: padding-box;
background-clip: border-box;

二、各属性详解

背景系列属性，共包含9种属性，除了background-blend-mode属性以外，其他8种属性全都支持通过background属性进行简写。

background-color：设置元素的背景颜色，默认值：transparent。
background-image：设置元素的背景图像，默认值：none。
background-size：设置元素背景图像的大小，默认值：auto。
background-position：设置元素背景图像的位置，默认值：0% 0%。
background-repeat：设置背景图像是否重复，以及如何重复，默认值：repeat。
background-clip：设置元素背景的渲染区域，默认值：border-box。
background-origin：设置元素背景的定位区域（背景区），默认值：border-box。
background-attachment：设置元素的背景图像是否随页面滚动或固定，默认值：scroll。
background-blend-mode（不支持简写）：设置元素背景层的混合模式，默认值：normal。

三、常用的属性介绍

1. background-size（该属性用来设置背景图像的大小）

    1）auto 

    该属性值auto auto为background-size的默认值，表示直接渲染图像本身的大小比例，超出元素大小的部分会被截掉，所以很可能会出现背景图像显示不全的问题，除非你背景图像的宽高正好等于元素的宽高，不常用。

    2）cover

    该属性值在保持图像的宽高比例的前提下，尽可能的缩放图像以完全覆盖背景区，当背景图像和背景区的宽高比例不同时，背景图像在缩放到完全覆盖背景区后，肯定会导致一部分图像超出背景区，超出部分会被裁减掉，导致图像显示不完全的情况。

    3）contain

    该属性值是在保持图像的宽高比例的前提下，尽可能的缩放图像以完全放入背景区，当背景图像和背景区的宽高比例不同时，背景图像在缩放到背景区后，肯定会导致一部分背景区未被覆盖，未被覆盖的区域则会显示background-color设置的背景颜色。

---

总结

本文只是简要讲解background属性用法，具体内容可以参考https://blog.csdn.net/weixin_45092437/article/details/129429472