CSS background属性使用指南

所有的浏览器都支持background属性 拿起了我多年前用过的xmind导出了张属性说明图

经典场景

奉上原图参照物

（图源/网络） #### 居中

不重复平铺 顺时针八个点

注：其中的`left top right bottom`为`background-position`的属性,可以设置为px 或者百分比

重复平铺

//x轴重复平铺
background: transparent url(./5.jpg) repeat-x

背景图指定大小

在日常开发中，我们常常需要对背景图进行一个尺寸的缩放，上面的常规操作是无法满足我们的需求的。如果是多行属性的操作中，我们可能是这样写：

background: transparent url(./5.jpg) no-repeat bottom left;
background-size:150px auto;

而在单行属性声明中，我们仅需这样写：

background: transparent url(./5.jpg) no-repeat bottom left/150px;

也可以达到一样的效果

注意事项: bg-size必须跟在 bg-position后并以'/'分隔，如 'center/100px'

关于bg-clip与bg-origin的属性说明

background-origin:背景图的原点位置的背景相对区域background-clip:背景图是否延伸到边框下面 在单行 background属性声明中，由于两者属性值相同，在仅出现了一个属性值的时候，他同时为 background-origin和 background-clip设定属性，如果出现了两次，则分别给 background-origin、 background-clip设定.

小结：

• background-origin决定了背景图原点从哪开始(起始点)
• background-clip决定了背景图的绘制到边框外沿、padding外延或者是content外延终止(终止点)
• 从我个人的理解上，起始点和终止点的对角线连线即为背景图可绘制的最大区域
• 当使用 background-attachment 为 fixed时， background-origin属性将被忽略不起作用。
• background-clip可以将背景图设置为文字的前景色

background 多背景图片使用

CSS如下：

background: url('./9.jpg') left center/100px no-repeat,
                url('./7.jpg') top center/100px no-repeat,
                url('./7.jpg') bottom center/100px no-repeat,
                url('./9.jpg') right center/100px no-repeat red;

效果图如下：

注：因为整个元素只能有一个背景色，所以在定义多背景图片的时候 bg-color只能在最后一个属性上声明，否则会导致整个 background属性声明失效； 在多张背景图存在重叠的情况下，先声明的背景图优先级高 CSS如下：

background: url('./5.jpg') center/100px no-repeat,
                url('./7.jpg') top center/100px no-repeat,
                url('./4.jpg') bottom center/150px no-repeat,
                url('./7.jpg') bottom center no-repeat,
                url('./9.jpg') right center/100px no-repeat red;

效果图如下：

有关background的单行属性声明使用就讲到这里，后续会继续补充，写的不好的麻烦见谅...新手作者

Object-fit实现img图片尺寸设置

本文主要针对的是background属性中的图片常规操作，讲到图片，这边也浅谈一下img的一个图片尺寸设定的小技巧，让我们的小伙伴们从

display: inline-block;
    width: 100%;
    height: auto;

解脱出来

CSS部分

HTML部分

效果图

该属性分别有 fill、 contain、 cover、 none、 scale-down五个，从效果图上来看，应该很好理解，这边只对 scale-down做一下说明。

scale-down属性值的内容尺寸会与 none或者 contain其中一个一样，至于取决于哪个值，取决于 none和 contain哪个得到的内容尺寸更小一些。当前的none属性黑眼圈较大影响工作，所以选择了contain黑眼圈较小的来安慰自己

小结

本文仅仅是总结了下background在实际开发中使用背景图片的相关单行属性声明的使用技巧 希望我的内容能被大家喜欢，不足之处还望理解和希望大佬指出赐教。谢谢大家！