CSSマスクはPNGアイコンの変色を実現する

本文は「純CSSが任意のフォーマットアイコンの変色を実現する研究」から抜粋した.
元のアイコンは次のとおりです.青いです.
次に#f 4615 cの赤いアイコンになるには、マスクを使うのが一番簡単です.
次のHTMLとCSSコードがあります.

"colorful">

.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    background-color: #f4615c;
    -webkit-mask: url(./xin.svg) no-repeat;
    mask: url(./xin.svg) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

CSS 3 maskのデフォルトは透明度に基づいてマスク効果を実現します.つまり、実色領域が表示され、透明領域が非表示になります.したがって、ターゲットアイコン色f 4615 cを背景色とし、元のアイコン(どんな色でも可)をマスク画像として使用するだけで、効果が得られます.
実际には、ここをクリックすることができます:CSS maskマスク任意の色の小さなアイコンdemoを実现
効果は次のようになります.
CSS 3マスクはとても使いやすくて、熟练して事の半分の功倍を掌握して、その知识の点は多くて、含む属性の値も多くて、兴味があって私の前の文章を参考にすることができます:“CSS 3 mask/masks详しく绍介します”、とても系統的に関连する知识の点を绍介しました.
以上、読んでくれてありがとう!
転載先:https://juejin.im/post/5c03df3de51d45489f05b004