css - 将 session 中保存的颜色应用于线性渐变

我有一个类，其中存储在会话中的图像放置在存储在会话中的背景色之上。我想为使用背景颜色的用户图像添加线性渐变。我怎样才能做到这一点？

这是我所拥有的：

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

理想情况下，我想获得类似以下内容：

  background-image: -webkit-linear-gradient(left,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

最佳答案

在尝试了几件事之后，我决定使用具有透明属性的径向渐变：

.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;
}

这将显示我的图像，并将会话中存储的颜色覆盖在图像的边缘。我想同样适用于线性渐变。

关于css - 将 session 中保存的颜色应用于线性渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24807937/