css 小师系列：为什么 background 渐变可以叠加，而颜色不可以？

css 小师系列：重学css，查漏补缺，努力成为css小师。

(ps:名字来源：最近喜欢看狼人杀，有个经典的节目叫做京城大师赛，其下还有各小师赛。借鉴起名，距离大师遥遥无期，只盼有一天能成为小师😂)

提问

首先我们来看下面css代码，考虑下其效果：

css 复制代码

.container{ 
    width: 200px;
    height: 120px;
    background: 
        linear-gradient(135deg, transparent 15px, deeppink 0),
        linear-gradient(-135deg, transparent 15px, deeppink 0),
        linear-gradient(-45deg, transparent 15px, deeppink 0), 
        linear-gradient(45deg, transparent 15px, deeppink 0);
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top right, bottom right, bottom left;
    background-repeat: no-repeat;
}

一个div上叠加四个线性渐变，效果如下图：

那么,如果把其中的渐变改成具体的颜色会怎样呢？

比如修改成如下代码：

css 复制代码

.container{ 
    width: 200px;
    height: 120px;
    background: 
        blue,
        red,
        green, 
        orange;
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top right, bottom right, bottom left;
    background-repeat: no-repeat;
}

大家可以想一想，或者去动手试一下，看了标题，大家可能也已经猜测到，是不会生效的,报的错误如下：

那么问题来了，为什么会产生这个现象？

解答

答：因为 background-color 只支持单一值，但是 background-image 可以叠加。

相信大家看到这个答案多少会迷惑一阵（就像我🤣），这哪里有图片，这不纯纯都是颜色吗？

ok，下面是详细解释，让我们一步步来看，首先先看mdn关于background属性的说明:

很清晰，background-color 只能出现出现一次，并且只能出现在最后一层。

那为什么渐变可以用多次呢?

我们再来看看关于渐变的定义：

渐变是 <image> 的一种特殊类型，可以出现在任何使用这个类型的地方，那么background里哪个属性对应这个类型呢？

没错， background-image！

于是简单理解，便是渐变其实是生成了一个图片之后赋值给 background-image，因此可以叠加。

结语

相信各位看完一定会觉得，原来，css 文档里还有这些细节需要注意。

ok，接下来布置个小作业，相信以各位的聪明才智，一定不在话下，问题如下：

css 父子元素背景色支持叠加吗？如果支持，要如何写呢？如果不支持，有办法实现类似效果吗？

至此，本文告一段落，后续会推出更多的小师系列，敬请期待哦！😎💕