CSS background属性使用指南

微信公众号：[前端公虾米]

关注前端公虾米。问题或建议，请公众号留言。

关于background的相关属性

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

试用模式，我太难了，公众号回复【background】获取原图

---

下面的演示案例将直接使用background这个属性，不适用单属性设置，由于这个属性在浏览器的支持更好，更简洁（能少一行是一行emmmm...）

经典场景

奉上原图参照物

（图源/网络）

居中

不重复平铺 顺时针八个点

注：其中的`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在实际开发中使用背景图片的相关单行属性声明的使用技巧 但愿个人内容能被你们喜欢，不足之处还望理解和但愿大佬指出赐教。 谢谢你们！

若是你以为这篇文章不错，请别忘记点个赞跟关注哦~😊

交流

微信公众号「前端公虾米」，将不定时更新最新、实用的开发小技巧和相关前端干货 关注公众号，回复"资料"获取全套前端视频教程