css - 如何使用 CSS 或 SVG 滤镜效果从 Gmail 编辑器复制图像突出显示效果？

Question

这是我正在尝试做的一个例子:

这可以用纯 CSS 来完成吗？我试图确定 Gmail 是如何做到这一点的，但他们的混淆已经变得非常好。

如果这不能单独用 CSS 来完成，SVG 过滤器是否是复制它的合适方法？

Answer 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