CSS中能否设置背景色后叠加渐变层？类似Photoshop操作

嘿，我懂你想要的那种PS分层式背景效果——先铺一层纯色底色，再在上面叠一层渐变，对吧？你之前用逗号分隔的写法background: #445566, linear-gradient(0deg, blue, green 40%, red);之所以无效，是因为CSS的多重背景要求每个层都是完整的背景属性值，单独的颜色值没法直接和渐变这样组合。下面给你两种靠谱的实现方法：

方法一：用多重背景模拟分层 #

把纯色底色也写成一个无变化的渐变，和渐变层一起作为多重背景。注意多重背景的顺序是先写的层在最下方，所以纯色渐变要放在前面：

background: linear-gradient(#445566, #445566), linear-gradient(0deg, blue, green 40%, red);

如果想让底色透过渐变显示出来，只要给渐变的颜色加上透明度（用rgba或者hsla）就行，比如：

background: linear-gradient(#445566, #445566), linear-gradient(0deg, rgba(0,0,255,0.7), rgba(0,128,0,0.7) 40%, rgba(255,0,0,0.7));

方法二：分开设置底色和渐变层 #

这种方式更直观，完全对应PS的分层逻辑：用background-color设置底层纯色，再用background-image添加上层渐变：

background-color: #445566;
background-image: linear-gradient(0deg, rgba(0,0,255,0.7), rgba(0,128,0,0.7) 40%, rgba(255,0,0,0.7));

同样，调整渐变颜色的透明度就能控制底色的显示程度，如果渐变是完全不透明的（比如用blue而不是rgba(0,0,255,1)），那底色就会被完全覆盖。

完整示例代码 #

给你一个可直接测试的例子：

.demo-box {
  width: 400px;
  height: 300px;
  border-radius: 8px;
  /* 任选一种方式即可 */
  background-color: #445566;
  background-image: linear-gradient(0deg, rgba(0,0,255,0.5), rgba(0,128,0,0.5) 40%, rgba(255,0,0,0.5));
}

内容的提问来源于stack exchange，提问作者DuchSuvaa