认识CSS的background（八）

马黑黑 · 发表于 2024-3-16 22:58

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-16 23:04 编辑

背景颜色，background-color，早期常用来预防图片失效时元素上的文本仍然可以清晰显示，一般这么设置：

background: #333 url('背景图片地址') no-repeat center/cover;

这要求背景颜色与背景图像的总体色系相一致或相近。上述写法是background-*的简写，颜色代码和图像代码之间用一个空格隔开，颜色在前图像在后的写法也只能使用空格隔开。颜色代码也可以写在图像代码的后面，二者间用空格或小角逗号隔开（建议后者，便于区分）。如下两种写法都是合法有效的：

/* 写法一 */

background: url('背景图片地址') no-repeat center/cover #333;

/* 写法二 */

background: url('背景图片地址') no-repeat center/cover, #333;

作为背景样式的构造参与者之一，背景颜色（分开写时是background-color）可以视为是背景构成的图层之一，它的作用不仅在背景图像失效时提供一个相对友好的阅读环境，还能参与到背景图像的融合（background-blend-mode）效果中来。以下演示，在启用背景图像融合滤镜前，背景图像是它原始的样子，并不受到元素的背景颜色的影响：

我个人坚持认为：背景颜色在使用背景图像融合技术时会作用于整体融合效果，但融合技术并不能直接作用于背景颜色，换言之，我们假若尝试使用 background-blend-mode 来修改背景颜色本体，那是不现实的，尽管有CSS大佬认为可以；上述演示，在我们通过点击按钮来手工启用了 multiply 融合滤镜之后，左边不被图像覆盖的区域仍然保持其原始状态（#333）——或许有人觉得确实有变化，那么，请使用拾色器检查一下左边区域的颜色是否存在变化。可以这么理解：融合技术总体上是直接作用于图像而非背景颜色，但一旦使用了背景融合技术，由于图像会因在复杂的算法中有部分像素变成一定程度的透明，元素的背景颜色就能从图像图层之下溢出，以此方式参与到融合技术所产生的效果。因此我赞同背景颜色+背景图像也属于元素的多背景图像的说法，尤其是在启用了背景融合技术之时。

地道的多重背景则应是元素的背景使用了多个图像，图像包含实质意义上的诸如 .png、.jpg、.jpeg、.webp 之类的图片，以及渐变背景 *-gradient。以下示例，使用了上述背景颜色+背景图片，在此基础上再加入一个 radial-gradient 径向渐变背景。看效果和代码：

background:

url('https://638183.freep.cn/638183/Pic/7.jpg') no-repeat 100% 0 / 70% 100%,

radial-gradient(black, green, red),

#333;

background-blend-mode: overlay,screen;

特别注意上面的background简写属性中，背景颜色 #333 是写在最后的，若写在前面，背景颜色在融合效果中不能发挥作用。此外，融合滤镜我们使用了两个，正片叠加（overlay）和滤色（screen），其中，滤色作用于 radial-gradient 渐变，将其内的颜色成分中的黑色 black 去掉，所以融合的效果特别明亮。可以点击示范下的按钮，将滤色 screen 滤镜去掉，也就是说，两个图像都是用正片叠加，看看效果是不是暗淡许多，如果是，那么，是径向渐变中 black 颜色的作用——它没有被滤掉，仅是因叠加融合而改变了色彩状态。

小结：本节主要探讨多重背景图像设置中背景颜色的参与细节，这是一个相对抽象的问题，并且，由于理解能力所限，一些解释不能保证十分准确，抑或存在理解上的错误亦未可知。