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

这里是什么，我试图做一个例子：如何使用CSS或SVG滤镜效果从Gmail作曲家复制图像突出显示效果？

可以这样用纯CSS做了什么？我试图确定Gmail如何做到这一点，但他们的混淆已经变得相当不错。

如果不能单独使用CSS，SVG过滤器是否适合复制这个过滤器？

2017-08-27 Slbox

如果您提供标记/ CSS样本，将有可能提出正确的答案 – LGSon

这是一张图片......如果您知道答案，那么我提供的就足够了。 – Slbox

好吧，由于图像可以以多种方式呈现（标记明智），标记很重要，并且它的父标记以及它们的CSS都可以提供额外的可能性来解决您提出的问题。给定的答案假设一个'img'，它可以用一个SVG矩阵或者内置的一个组合来改变。我尽量不假设_什么，而是问，并能够给出正确的答案。如果你不想提供这些，你可以限制选择来解决你的问题，但当然，这是你的选择。 – LGSon

图像着色可以很容易地完成，文本反转也是如此。但据我所知，很难将图像着色和文本反转结合在一个过滤器中。这里是图像着色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

来源

2017-08-28 00:57:47

非常感谢。我会研究如何做到这一点，并接受它作为一个答案，如果它是可行的。 – Slbox

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

回答

相关问题