CSS背景颜色与渐变分层

Question

是否可以在css中设置背景颜色，然后使用渐变进行分层？就像我在photoshop中做的那样？

我以为我可以这样做：

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

但这显然不起作用

有没有办法实现它？

Answer 1

是的，就像这样：

background: green linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);

请注意，background之后的第一件事是您的颜色green，然后是gradient从blue到transparent（无逗号）

如果您愿意，可以将color放在最后。

＆＃13;

＆＃13;

#myDiv{
   width: 300px;
   height: 300px;
   background: green linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
}

＆＃13;

<div id="myDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你有两个解决方案。您可以将渐变定义为背景，然后设置背景颜色：

＆＃13;

＆＃13;

.box {
 height:200px;
 background: linear-gradient(0deg, transparent,red);
 background-color:#445566; /* Should be place after background property*/
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

.box {
 height:200px;
 background-color:#445566; /* Can be placed here */
 background-image: linear-gradient(0deg, transparent,red);
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

如果您检查documenation，您还可以看到在使用多个背景时可以将背景颜色附加为最后一个值：

＆＃13;

＆＃13;

.box {
 height:200px;
 background: linear-gradient(0deg, transparent,red), #445566;
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;