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ノートブックを実行する問題を解決する

推薦する

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

Vue で Graphql インターフェースを実装する例

注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

JavaScript ジグソーパズルゲーム

この記事の例では、ジグソーパズルゲームを実装するためのJavaScriptの具体的なコードを参考まで...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

トピックページデザインの 5 つの基本スキル (Alibaba UED Shanmu)

このトピックは、2012 年後半の社内共有です。まだ記事にはなっていませんが、春節が近づいているので...

MySQL マスタースレーブステータスチェックの実装

1. AデータベースとBデータベースの同期ステータスを確認する次のコマンドを入力すると多くの情報が表...

MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)

目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...

Nodejs は readline を使用してコンテンツ入力を促すサンプルコード

目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...

MySQL 5.6 のインストール手順(画像とテキスト付き)

MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...

Linux の 5 ステップ ビルド カーネル ツリー

目次0. システムに付属するカーネルツリー1. 環境設定最初のステップステップ2 2. ソースコード...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

CSS におけるスタックコンテキストの具体的な使用法

序文一部の CSS 相互作用の影響により、要素に設定されたz-index実際のサイズに応じて重ね合わ...