如何使用 CSS 或 SVG 滤镜效果从 Gmail 作曲家复制图像突出显示效果？答案

【问题标题】：How to replicate image highlighting effect from Gmail composer using CSS or SVG filter effect?如何使用 CSS 或 SVG 滤镜效果从 Gmail 作曲家复制图像突出显示效果？
【发布时间】：2018-02-05 04:31:06
【问题描述】：

这是我正在尝试做的一个示例：

这可以用纯 CSS 完成吗？我试图确定 Gmail 是如何做到这一点的，但他们的混淆已经相当不错了。

如果仅使用 CSS 无法做到这一点，那么 SVG 过滤器是否是复制这一点的合适方法？

【问题讨论】：

如果您提供标记/CSS 示例，则可以提出正确的答案
这是一张图片...如果您知道答案，那么我提供的就足够了。
好吧，由于图像可以通过多种方式呈现（标记方式），因此标记很重要，而且它的父标记以及它们的 CSS 可能会提供额外的可能性来解决您的问题。给定的答案假定为img，可以使用 SVG 矩阵或内置矩阵的组合进行更改。我尽量不去假设什么，而是去问，这样才能给出正确的答案。如果您不想提供，您可以限制解决问题的选项，但当然，这是您的选择。
这不是浏览器默认的文本/图像选择样式吗？当我将电子邮件撰写窗口与此小提琴进行比较时：jsfiddle.net/kmxwp7tz 它们在 Chrome (Mac) 中的行为完全相同
@Turnip 你是对的。这是默认行为。我试图在 Electron 中复制它，所以看起来我什至没有问正确的问题。非常感谢。

标签： css svg sass

【解决方案1】：

图像着色可以轻松完成，文本反转也可以。但据我所知 - 很难将图像着色和文本反转组合在一个过滤器中。这是 FWIW 的图像着色：

img:hover {
  filter: url(#bluetone);
}

<svg>
  <defs>
    <filter id="bluetone">
        <feColorMatrix type="matrix" values="0 0 0 0 0 
                                             0 0 0 0 0 
                                             1 1 1 0 0
                                             0 0 0 1 0"/>
    </filter>
  </defs>
</svg>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32648/Sample%20Image.PNG">

您可以调整过滤器，使其成为您想要的确切色调 - 只需确保您用于过滤器的图案是

x x x 0 0 
y y y 0 0 
z z z 0 0 
0 0 0 1 0

【讨论】：

非常感谢。我会研究一下可以用这个做什么，如果可行的话，我会接受它作为答案。