Css 背景剖析：直观理解背靠背

作为一名程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。背景，作为 css 中的老牌属性，相信大家并不陌生，相关属性有的也不少，希望大家在看这篇文章时，先放下对背景的固有印象，跟着下面的思路来深入的了解下浏览器的幕后黑手。

为什么要有背景属性？

我们先不急于讨论这个属性具体能做什么，而是来看看它存在的意义。我们知道，网页的渲染过程分为html解析，css解析，dom生成，布局，绘制的过程。在绘制阶段，需要用到css中的各种样式属性来决定如何将html元素渲染到屏幕上。而背景属性，就是用来元素背景的样式，包括背景色、背景图片等。它存在的意义就是为了让网页中的元素有更丰富的视觉效果，让网页更加美观。

背景属性能做什么？

背景属性可以用来设置元素的背景色、背景图片、背景重复、背景大小、背景位置、背景固定、背景模糊、背景裁剪、背景融合、背景附件、背景渐变等。这些属性可以让我们对元素的背景进行全面的控制，从而实现各种各样的视觉效果。

如何使用背景属性？

背景属性的语法为：

background: <property-value>;

其中， 可以是以下值：

• 背景色 ：用来设置元素的背景色。语法为：

background-color: <color>;

其中， 可以是任何有效的颜色值，如：

• #ffffff：白色

• #000000：黑色

• rgb(255, 0, 0)：红色

• rgba(255, 0, 0, 0.5)：半透明红色

• 背景图片 ：用来设置元素的背景图片。语法为：

background-image: <url>;

其中， 是背景图片的路径。路径可以是绝对路径，也可以是相对路径。

• 背景重复 ：用来设置背景图片的重复方式。语法为：

background-repeat: <repeat-style>;

其中， 可以是以下值：

• repeat：背景图片将在水平和垂直方向上重复。

• repeat-x：背景图片将在水平方向上重复。

• repeat-y：背景图片将在垂直方向上重复。

• no-repeat：背景图片不会重复。

• 背景大小 ：用来设置背景图片的大小。语法为：

background-size: <size>;

其中， 可以是以下值：

• auto：背景图片的原始大小。

• <length>：背景图片的长度。

• <percentage>：背景图片的百分比。

• 背景位置 ：用来设置背景图片的位置。语法为：

background-position: <position>;

其中， 可以是以下值：

• left：背景图片位于元素的左侧。

• center：背景图片位于元素的中央。

• right：背景图片位于元素的右侧。

• top：背景图片位于元素的顶部。

• bottom：背景图片位于元素的底部。

• 背景固定 ：用来设置背景图片是否固定。语法为：

background-attachment: <attachment>;

其中， 可以是以下值：

• scroll：背景图片会随着元素的滚动而滚动。

• fixed：背景图片不会随着元素的滚动而滚动。

• 背景模糊 ：用来设置背景图片的模糊效果。语法为：

background-blur: <blur-radius>;

其中， 是模糊的半径。

• 背景裁剪 ：用来设置背景图片的裁剪方式。语法为：

background-clip: <clip-value>;

其中， 可以是以下值：

• border-box：背景图片将被裁剪到元素的边框内。

• padding-box：背景图片将被裁剪到元素的内边距内。

• content-box：背景图片将被裁剪到元素的内容区域内。

• 背景融合 ：用来设置背景图片的融合方式。语法为：

background-blend-mode: <blend-mode>;

其中， 可以是以下值：

• normal：正常融合。

• multiply：正片叠底。

• screen：屏幕融合。

• overlay：叠加。

• darken：变暗。

• lighten：变亮。

• color-dodge：颜色减淡。

• color-burn：颜色加深。

• hard-light：强光。

• soft-light：柔光。

• difference：差值。

• exclusion：排除。

• hue：色相。

• saturation：饱和度。

• color：颜色。

• luminosity：亮度。

• 背景附件 ：用来设置背景图片的附件。语法为：

background-origin: <origin>;

其中， 可以是以下值：

• border-box：背景图片将被附加到元素的边框。

• padding-box：背景图片将被附加到元素的内边距。

• content-box：背景图片将被附加到元素的内容区域。

• 背景渐变 ：用来设置元素的背景渐变。语法为：

background: linear-gradient(<angle>, <color-stop>+);

其中， 是渐变的方向， 是渐变的颜色。

结语

背景属性是一个非常强大的属性，它可以用来实现各种各样的视觉效果。通过对背景属性的深入理解，我们可以让网页中的元素更加美观，让网页更加富有表现力。