【CSS】速查复习background相关所有属性(上)

前言

background是一种 CSS 简写属性，用于一次性集中定义一个或多个背景属性，其中的属性有以下这些：

• background-clip
• background-color
• background-image
• background-origin

以下内容会在【CSS】速查复习background相关所有属性(下)涉及

• background-size
• background-attachment
• background-blend-mode
• background-position
• background-repeat

内容不少，我会按照上面这个顺序来展开图文介绍

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面

clip：有裁剪，截取，片段的意思

如果没有设置背景图片background-image或背景颜色background-color

这个属性只有在边框 border被设置为soild、透明或半透明时才能看到视觉效果（与 border-style或 border-image有关）

否则，本属性产生的样式变化会被边框覆盖。

取值： (初始值为：border-box)

• border-box

  背景延伸至外边距margin外沿。

• padding-box

  背景延伸至内边距padding外沿，不会绘制到边框处。

• content-box

  背景被裁剪至内容区content box外沿。

• text

  背景被裁剪成文字的前景色，color要调成tranparent

  （这也是一种实现渐变色文字的思路）

background-color

background-color 设置元素的背景色，属性的值为颜色值或透明transparent，二者选其一

color：颜色的意思

取值：(初始值为transparent )

• <color>

  一个描述背景统一颜色的CSS color值。即使一个或几个的 background-image被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染

  当然，transparent 也是一种颜色，即rgba(0,0,0,0)

那么背景色的概念了解后，就要引出背景图的概念，以及他们同时出现时的权重关系。

background-image

background-image属性用于为一个元素设置一个或者多个背景图像

image：映像，图像的意思

多个背景图像的层级情况：先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像图层位置最高。

与边框的层级情况：元素的边框 border会在指定的图像上面绘制

与背景色的层级情况：元素的背景色background-color 会在在指定的图像下面绘制

拿MDN网站里面的图举个例子：

• 这个元素的background-image有三个属性值
• 第一个属性代表过渡色，第二个属性lizard.png是蜥蜴所在的层级，第三个属性star.png是星星所在的层级

最后呈现的效果是：过渡色在最底部，先出现的lizard.png在star.png的上层

背景色 #000 被设置在最底层

如图所示：

取值：(初始值为：none)

• none

  是一个表示无背景图的关键字

• image

  用来标记将要显示的图片，支持多背景设置，背景之间以逗号隔开

  linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片!!!

备注： 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 background-color属性。因为当图像无法被加载（如网络连接断开的情况）浏览器会将此情况等同于其值被设为 none，背景色就会被展现。

图像的绘制与盒子和边框的关系，需要在 CSS 属性background-clip 和 background-origin 中定义，那我们顺带讲下一个部分。

background-origin

background-origin规定了指定背景图片background-image的原点位置的背景相对区域

origin:起源，出身，（数）原点的意思

取值：

• border-box

  背景图片的摆放以 border 区域为参考

• padding-box

  背景图片的摆放以 padding 区域为参考

• content-box

  背景图片的摆放以 content 区域为参考

是不是似曾相识，这不就是background-clip吗？

单看这描述两者确实很相像，但是这两个元素如今还能同时写在这个文章里是有原因的

刚才的例子，这次我们加上背景色和摆放尺寸的设定（下回会讲到）以便观察

我们把background-clip改成background-origin

结果发现：

• background-clip是一种clip裁剪，把背景色和背景图一起裁剪到padding-box里面

• 而background-origin是设定背景图origin原点，只把背景图放在padding-box里面

• 在padding-box和content-box的表现情况和background-clip也同样只有这个小区别，而且他没有text属性。

注意：当使用 background-attachment为 fixed 时，该属性将被忽略，不起作用。

那么background-attachment是什么属性，在下篇文章会讲到。

参考文献

MDN中文文档：developer.mozilla.org/zh-CN/

下期文章链接

【CSS】速查复习background相关所有属性(下)