CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード

この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の色の投影を生成し、元の画像を非表示にすることで、画像の色を変更するという目的を達成します。まず効果を確認してください。

次はコードです

<p><strong>オリジナルアイコン</strong></p>
<i class="icon icon-del"></i>
<p><strong>色を変更できるアイコン</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

.アイコン {
    表示: インラインブロック;
    幅: 20px; 高さ: 20px;
    オーバーフロー: 非表示;
}
.アイコン削除{
    背景: url(delete.png) 繰り返しなし 中央;
}
.icon > .icon {
    位置: 相対的;
    左: -20px;
    border-right: 20px 透明の実線;
    -webkit-filter: ドロップシャドウ(#0033FF 20px 0);
    フィルター: ドロップシャドウ(#0033FF 20px 0);
}

重要なポイントの1つは

border-right: 20px solid transparent;

Chrome では、要素の本体がページ上でまったく表示されない場合はドロップ シャドウは表示されません。本体が 1 ピクセルでも表示される場合は、ドロップ シャドウは完全に表示されます。

元のアイコンを非表示にするためにoverflow:hidden使用したため、その投影は Chrome ブラウザで正常に表示されません。この問題は、透明な境界線を追加することで解決します。

要約する

CSS3 フィルターを使用して PNG 画像の色を変更する方法についての記事はこれで終わりです。CSS を使用して PNG 画像の色を変更する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。