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 ... 方法，但这也为图像的透明背景提供了线性渐变，我只希望渐变 仅应用于形状 .也许使用口罩会有帮助？

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

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

Seed image with black background

Seed image with transparency

Desired outcome

（抱歉还不能 post 图片）

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>

Answer 2

使用图像作为遮罩，然后您可以添加背景作为颜色：

.box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}

img {
  display: block;
  width: 100%;
  opacity:0; /* no need to show the original image, it will simply define the size */
}

body {
  background: grey;
}

<div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

更简化的代码，以防您知道图像的比例：

.box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background: grey;
}

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

如果您希望图像保持可见，也可以像这样：

.box {
  display: inline-block;
  width: 200px;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}

<div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

还有比例技巧

.box {
  display: inline-block;
  width: 200px;
  background:
   linear-gradient(45deg,transparent,orange),
   url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}

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

CSS 透明度图像的线性渐变

Linear gradient across an image with transparency in CSS

javascript

css

image

linear-gradients