画像の色を変更するための純粋なCSS

画像の色を変更するための純粋なCSS

画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。

ヒント: JPG、PNG、GIFはすべてOKですが、前提条件として、純粋な黒色と白い背景が必要です。

.pic1 {
    背景画像: url($img), 線形グラデーション(#f00, #f00);
    背景ブレンドモード: 明るくする;
    背景サイズ: カバー;
}

要約する

上記は、私が紹介した画像の色を変更するための純粋な CSS テクニックです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Apache SkyWalking アラーム設定ガイドの詳細な説明

>>:  Dreamweaver で Zen コーディングを使用する方法

推薦する

データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...

フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...

自動行折り返し機能付き CSS Flex レイアウトのサンプル コード

フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけで...

LinuxシステムにおけるMySQLの一般的な操作コマンド

仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

JavaScriptの厳密モードが8進数をサポートしていない問題の説明

JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

Alibaba Cloud Nginx はドメイン名アクセス プロジェクトを実装するために https を設定します (グラフィック チュートリアル)

ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...