SVG 或 CSS 过滤器，等于不透明度的上 div

【问题标题】：SVG or CSS filter which equals to upper div with opacitySVG 或 CSS 过滤器，等于不透明度的上 div
【发布时间】：2017-03-30 16:12:27
【问题描述】：

我想知道是否有一种简单的方法可以找到 CSS 过滤器或 SVG 过滤器，这看起来与我在图像上应用带有背景和不透明度的 div 相同。

我需要一个可以应用于第一张图片的滤镜，使其看起来像第二张图片

.img {
  filter: ... 
}

https://jsfiddle.net/1qd6pyfu/

【问题讨论】：

标签： css svg-filters css-filters

【解决方案1】：

这看起来非常接近基本的多重混合 - 就像这样（我没有完全匹配绿色”。你也可以使用 CSS 混合模式来做到这一点。

<svg width="800px" height="600px">
  <defs>
  <filter id="greenit" x="0%" y="0%" width="100%" height="100%">
   <feFlood flood-color="#8B5"/>
   <feBlend mode="multiply" in2="SourceGraphic"/>
  </filter>

  </defs>

  <image filter="url(#greenit") width="400px" height="400px" xlink:href="https://www.binarymoon.co.uk/wp-content/uploads/2012/04/draw-something-unicorn-e1334932907258.png"/>

</svg>

【讨论】：