Question

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

这就是我所拥有的：

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

Answer 1

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

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

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

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

1 个答案: