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

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 をよろしくお願いいたします。

<<:  RGBカラーテーブルコレクション

>>:  サーバー上でjupyterノートブックを実行する問題を解決する

推薦する

Docker 経由で Redis 6.x クラスターをデプロイする方法

システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...

Vueはズームイン、ズームアウト、ドラッグ機能を実装しています

この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...

HTML で入力プロンプトのテキスト スタイルを変更するためのサンプル コード

多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...

MySQL 8.0.16 Win10 zip バージョンのインストールと設定のグラフィック チュートリアル

この記事では、MySQL 8.0.16 Win10 zip版のインストールと設定のグラフィックチュー...

vue で h5 側のアプリを開きます (Android か Apple かを判断します)

1. 開発環境 vue+vant 2. コンピュータシステム Windows 10 Profess...

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...

k8s に ingress-nginx をデプロイする手順

目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)

1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...

vue3.0 のウォッチ リスナーの例の詳細な説明

目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

MySQL REVOKE でユーザー権限を削除する

MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...