javascript - CSS 中具有透明度的图像的线性渐变

Question

我有一个简单的 .PNG 图像，具有白色形状和透明背景。这是在 .js 中创建的。

    var img = document.createElement("img");
    img.src = "Images/seed.png";
    img.classList.add("seed");
    document.getElementById("spiralDiv").appendChild(img); 

我想向这个形状添加线性渐变，改变形状的不透明度。我尝试过使用正常的 background: Linear-gradient(rgba ... 方法，但这也为图像的透明背景提供了线性渐变，我只想渐变为 仅适用于形状。也许使用 mask 会有帮助？

Change color of PNG image via CSS?仅更改形状的颜色很有帮助，但我不确定如何使其与渐变一起使用。

我不能只在 Photoshop 中绘制带有渐变的形状，因为我还想在运行时更改 JavaScript 中渐变的方向。

Seed image with black background

Seed image with transparency

Desired outcome

(抱歉还不能发布图片)

Answer 1

从您链接的图像中，可能会混合使用filter和mix-blend-mode:

可能的示例:

div {
  background: linear-gradient(to bottom left, #ff730f, #ff730f, #ffc69f, white) red;
  width: max-content;
}
div + div {background:linear-gradient(to   left, orange,gray,purple,gold,green,tomato,blue)}
img {
  display: block;
  mix-blend-mode: screen;
  filter: invert(100%);
}
body {display:flex}

<div><img src="https://i.imgur.com/8GlLI4B.png"></div>

<div><img src="https://i.imgur.com/8GlLI4B.png"></div>