CSS背景颜色与渐变分层答案

【问题标题】：CSS background color layered with gradientCSS背景颜色与渐变分层
【发布时间】：2018-04-03 17:48:28
【问题描述】：

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

我想我可以这样做：

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

但这显然行不通

有什么方法可以实现吗？

【问题讨论】：

标签： css background gradient

【解决方案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放在最后。

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

&lt;div id="myDiv"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

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

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

或者

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

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

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

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

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

【讨论】：