Css 将会话中保存的颜色应用于线性渐变

我有一个类，其中存储在会话中的图像被放置在存储在会话中的背景色之上。我想添加一个线性梯度到用户的图像，采取的背景颜色。我该怎么做

以下是我所拥有的：

.headerimagecell {
      background-image: -webkit-linear-gradient(left, 
        <%=headerbgc %>
      ),
      url('./<%=filePath %>');
    }

---

在尝试了一些方法之后，我决定使用具有透明特性的径向渐变：

.headerimagecell {
    background-repeat: no-repeat;
    background-size: 400px 225px;
    min-width: 400px;
    background-image: url('./<%=filePath %>');
    background-image: -webkit-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: -moz-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: -o-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    border-radius: 10px;
}

.headerimagecell{
背景重复：无重复；
背景尺寸：400px225px；
最小宽度：400px；
背景图片：url（“./”）；
背景图片：-webkit径向渐变（透明），url（'./'）；
背景图片：-moz径向渐变（透明），url（'./'）；
背景图像：-o-径向梯度（透明），url（'./'）；
背景图像：径向渐变（透明），url（'./'）；
边界半径：10px；
}

这将显示我的图像，其中存储在会话中的颜色覆盖在图像的边缘上。我想线性梯度也是如此

.headerimagecell {
    background-repeat: no-repeat;
    background-size: 400px 225px;
    min-width: 400px;
    background-image: url('./<%=filePath %>');
    background-image: -webkit-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: -moz-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: -o-radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    background-image: radial-gradient(transparent, <%=headerbgc %>),  url('./<%=filePath %>');
    border-radius: 10px;
}