CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正できるようになります。以下では、CSS3 で背景画像の色を変更する方法について簡単に紹介します。 方法1 : CSS3フィルターでドロップシャドウを使用する コードは次のとおりです。 <スタイル> 。アイコン{ 表示: インラインブロック; 幅: 180ピクセル; 高さ: 180ピクセル; 背景: url('img/XXX.png') 繰り返しなしの中央カバー; オーバーフロー: 非表示; } .icon:after{ コンテンツ: ''; 表示: ブロック; 高さ: 100%; 変換: translateX(-100%); 背景: 継承; filter: drop-shadow(144px 0 0 #fff); // 変更する色の値} </スタイル> <i class="icon"></i> 例: ドロップシャドウ フィルターを使用すると、要素または画像の不透明な領域に影を追加できます。 透明な PNG アイコンにぼかしのない影を適用することは、別の色のアイコンを生成することと同じです。 次に、overflow:hiddenと変位処理を使用して元のアイコンを非表示にします ミックスブレンドモード値: [最後の 3 つを除いて、効果は PS とほぼ同じです] : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : 方法2 : CSS3のmix-blend-modeとbackground-blend-modeを使用する コードは次のとおりです。 <スタイル> 。アイコン{ 表示: インラインブロック; 幅: 180ピクセル; 高さ: 180ピクセル; 背景画像: url($'img/XXX.png'), 線形グラデーション(#f00, #f00); 背景ブレンドモード: 明るくする; 背景サイズ: カバー; } </スタイル> <i class="icon"></i> 例: 明るくするブレンド モード: 明るくする、明るくするモードは暗くするモードの反対の効果があります。黒はどの色よりも暗いので、黒はどの色にも置き換えられます。逆に、素材の背景色が黒の場合、メインカラーは白になります。次に、暗くするブレンドモードを使用する必要があります。 Linear-gradient(#f00, #00f) でもグラデーションカラーの効果を実現できます。 要約:方法 1 では png 形式の画像に制限されますが、方法 2 では画像形式に制限はありません。 CSS3 には一定の互換性があります。 Chrome、Firefox、モバイル端末でのご利用がより適しています。 CSS3 を使用して背景画像の色を変更するさまざまな方法についての記事はこれで終わりです。CSS3 を使用して背景画像の色を変更する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: HTML の POST リクエストにおける a タグの 2 つの使用法の分析
Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...
ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...
目次Samba サーバーの紹介Samba サーバー コンポーネントSamba サーバー関連の設定ファ...
概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...
JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...
ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...
目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...
Nginx はバージョン番号を非表示にする実稼働環境では、セキュリティ上の脆弱性の漏洩を避けるために...
行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...
序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...
目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...
jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...
NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...