CSSやSVGフィルター効果を使用してGmailのコンポーザーから画像のハイライト効果を複製する方法は？ここ

Question

は、私が何をしようとしているの例です：

は、これは、純粋なCSSで行うことができますか？ Gmailの仕組みを判断しようとしましたが、その難読化はかなりうまくいっています。

これをCSSだけで実行できない場合、SVGフィルタはこれを複製する適切な方法でしょうか？

Answer 1

画像の色合いを簡単に行うことができるので、テキストの反転も可能です。しかし、私が理解できる限り、画像の色合いとテキストの反転を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