揭秘CSS中的background模块

css里的background模块提供了各种方式来设置背景图。了解一些常用的属性基本就能覆盖工作的大部分场景，但为了能更灵活地使用css背景，还是很有必要全面地认识并理解其中的知识.

这是我参与更文挑战的第7天，活动详情查看： 更文挑战

图像定位区

图像的定位区（positioning area）是一个非常重要的属性，名为background-origin，它提供了承载图像的空间准绳。有很多属性依赖该属性的设置：

• 图像尺寸（background-size）的百分比值是相对于图像定位区尺寸的。
• 图像的初始位置（background-position）的百分比计算规则也是与定位区尺寸息息相关的。例如10%的最终计算值为(width/height of positioning area - width/height of image size)*10%。
• 图像的平铺（background-repeat）,图像平铺类型也是在定位区内设置的。

有效值为：border-box、padding-box、content-box。

例如一个设置了边框、内边距包含文本的盒子，图像尺寸设置为100%。

当background-origin为border-box时，可以看到图像铺满了整个border-box：

当background-origin为padding-box时，图像只铺满了内边距和内容：

当background-origin为content-box时,图像只铺满了内容：

另，再顺带介绍一个属性background-clip，定义了背景图像以什么盒模型进行剪切：

• border-box: 表示图像覆盖的内容包含border+padding+content
• padding-box: 表示图像覆盖的内容包含padding+content
• content-box: 表示图像覆盖的内容包含content

接下来我们将background-origin和background-clip结合起来：

• 当定位区域设置为border-box，background-clip可以设置三种有效剪切：border-box、padding-box、content-box。
• 当定位区域设置为padding-box时，background-clip可以设置两种有效剪切：padding-box、content-box。
• 当定位区域设置为content-box时，background-clip只有一种有效剪切：content-box。

图像大小

可以通过background-size来指定背景图像的尺寸。

可以设置决定尺寸如：background-size:50px 50px;表示将图片强制设置为50px宽50px高，不管其原始比例如何。

也可以设置百分比的值，此处的百分比是相对于positioning area（background-origin）的尺寸。

也可以设置关键字值：

• cover。表示将图片等比例放大到恰好能覆盖positioning area(background-origin),但可能溢出定位区，可通过设置background-clip将图像剪切。
• contain。表示将图像等比例缩小恰好能放到positioning area内。

图像的平铺

所谓的平铺，是指图像的初始位置（background-postion）和尺寸（background-size）确定后， 图像平铺整个background-clip盒子区域。

关于背景图像平铺，有个应用场景是将一个图像单元重复渲染最终形成所需显示效果，可以用来实现应用内的水印、logo图标等。这些都是通过设置background-repeat:repeat;实现的。

其实repeat存在一个问题，那就是无法保证四条边附近图像的完整性：

我们可以将background-repeat设置为space来解决边角图像不完整的问题：

观察发现它是通过给图像之间设置合理的距离来保证图像完整性的。

图像粘附类型

图像粘附类型的属性名为background-attachment,有三种值：

• fixed：表示图像相对视口固定

• scroll：表示图像跟随元素滚动

• local：表示图像相对元素内容盒子（content）固定

最后

我们还可以一个background属性来实现上述所有的属性，优点是书写更加的简洁，缺点是没有很好的可读性。

另，可以给元素设置多个背景layer哦，并且background-image属性支持通过设置css渐变代替图片源哦，优点是可以节省带宽资源，缺点是无法提供色彩丰富的UI元素。

最后，如果本文对你有所帮助，欢迎点赞。如果你对css背景有任何的疑惑也欢迎留言讨论哦。

感谢阅读！