フィルター属性は要素の視覚効果を定義します ぼかし
輝度 画像に線形乗算を適用し、画像を明るくしたり暗くしたりします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。その他の値は線形乗数効果に対応します。 100%を超える値も可能で、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 になります。 コントラ 画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。値は 100% を超える場合があり、その場合はより低いコントラストが使用されます。値が設定されていない場合、デフォルトは 1 になります。 グレーケール 画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。設定されていない場合、値はデフォルトで 0 になります。 色相回転 画像に色相回転を適用します。 「角度」の値は、画像が調整されるカラーホイールの角度を設定します。値が 0deg の場合、画像は変更されません。値が設定されていない場合、デフォルト値は 0deg になります。この値に最大値はありませんが、360 度を超えるともう一周するのと同じになります。 インバー 入力画像を反転します。値は変換のスケールを定義します。値が 100% の場合は完全に反転します。値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。 値が設定されていない場合は、デフォルトで 0 になります。 不透明度 画像の透明度を変換します。値は変換のスケールを定義します。値が 0% の場合は完全に透明になり、値が 100% の場合は画像は変更されません。 0% から 100% までの値は効果の線形乗数であり、画像サンプルに量を掛けることに相当します。 値が設定されていない場合は、デフォルトで 1 になります。この機能は既存の不透明度プロパティと非常に似ていますが、一部のブラウザではパフォーマンスを向上させるためにフィルターを通じてハードウェア アクセラレーションが提供される点が異なります。 飽和する 画像の彩度を変換します。値は変換のスケールを定義します。値が 0% の場合、彩度は完全に低下しますが、値が 100% の場合、画像は変化しません。その他の値の場合、それらは効果の線形乗数です。 100% を超える値が許可され、より高い彩度が得られます。 値が設定されていない場合は、デフォルトで 1 になります。 セピア 画像をセピア色に変換します。値は変換のスケールを定義します。値が 100% の場合、完全にセピア色になり、値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。設定されていない場合、値はデフォルトで 0 になります。 ドロップシャドウ 画像に影効果を設定します。影は画像の下に合成され、ぼかすことができ、特定の色でペイントできるマスクのオフセット バージョンです。 この関数は、<shadow> タイプ(CSS3 背景で定義)の値を受け入れますが、「inset」キーワードは使用できません。この機能は既存の box-shadow プロパティと非常によく似ていますが、違いは、フィルターを通じて、一部のブラウザがパフォーマンスを向上させるためにハードウェア アクセラレーションを提供することです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> </head> <スタイル> 体 { 背景色: #000; 色: スカイブルー; } div { 境界線: 1px 実線 #fff; パディング: 10px; 幅: 610ピクセル; マージン: 10px; } .ぼかし1 { フィルター: ぼかし(0.4px); } .ぼかし2 { フィルター: ぼかし(1px); } .blur3 { フィルター: ぼかし(4px); } .明るさ1 { フィルター: 明るさ(0.30); } .明るさ2 { フィルター: 明るさ(0.8); } .明るさ3 { フィルター: 明るさ(1); } .コントラスト1 { フィルター:コントラスト(10%); } .コントラスト2 { フィルター:コントラスト(50%); } .コントラスト3 { フィルター:コントラスト(100%); } .グレースケール1 { フィルター: グレースケール(10%) } .グレースケール2 { フィルター: グレースケール(50%) } .グレースケール3 { フィルター: グレースケール(100%) } .huerotate1 { フィルター: 色相回転(0度); } .huerotate2 { フィルター: 色相回転(90度); } .huerotate3 { フィルター: 色相回転(180度); } .invert1 { フィルター: 反転(20%) } .invert2 { フィルター: 反転(60%) } .invert3 { フィルター: 反転(100%); } .不透明度1 { フィルター: 不透明度(10%) } .不透明度2 { フィルター: 不透明度(80%) } .不透明度3 { フィルター: 不透明度(100%); } .飽和1 { フィルター: 飽和(0.2); } .saturate2 { フィルター: 飽和(0.6); } .saturate3 { フィルター: 飽和(1); } .セピア1 { フィルター:セピア(10%) } .セピア2 { フィルター:セピア(60%) } .セピア3 { フィルター: セピア(100%) } .shadow1 { フィルター: ドロップシャドウ(2px 2px 2px 赤); } .shadow2 { フィルター: ドロップシャドウ(8px 8px 1px 紫); } .shadow3 { フィルター: ドロップシャドウ(1px 1px 10px ホットピンク); } </スタイル> <本文> <div class="filter1"> <p>画像にガウスぼかしを描画します。値が大きいほど、ぼやけが強くなります。</p> <ul> <li class="blur1">ぼかし</li> <li class="blur2">ぼかし</li> <li class="blur3">ぼかし</li> </ul> </div> <div class="filter2"> <p>画像に線形乗算を適用して、画像を明るくしたり暗くしたりします。値が 0 の場合、画像は完全に黒くなり、値が 100% を超えると画像は明るくなります</p> <ul> <li class="brightness1">明るさ</li> <li class="brightness2">明るさ</li> <li class="brightness3">明るさ</li> </ul> </div> <div class="filter3"> <p>画像のコントラストを調整します。値が 0 の場合、画像は完全に黒になります。値が 100% を超えると、コントラストはさらに低くなります</p> <ul> <li class="contrast1">コントラスト</li> <li class="contrast2">コントラスト</li> <li class="contrast3">コントラスト</li> </ul> </div> <!-- <div class="filter4"> <p>ぼかし</p> <ul> <li class="blur1">ぼかし</li> <li class="blur2">ぼかし</li> <li class="blur3">ぼかし</li> </ul> </div> --> <div class="filter5"> <p>画像はグレースケールに変換されます。値が 0 の場合、画像に変更はありません。値が 100% の場合、完全にグレースケールに変換されます。</p> <ul> <li class="grayscale1">グレースケール</li> <li class="grayscale2">グレースケール</li> <li class="grayscale3">グレースケール</li> </ul> </div> <div class="filter6"> <p>画像に色相回転を適用します。値が 0deg の場合、画像は変化しません。最大値はなく、360deg を超えると、もう一度一周するのと同じです。</p> <ul> <li class="huerotate1">huerotate</li> <li class="huerotate2">ヒューロテート</li> <li class="huerotate3">ヒューロテート</li> </ul> </div> <div class="filter7"> <p>入力画像を反転します。 0% は画像に変更がないことを意味し、100% は画像が完全に反転していることを意味します</p> <ul> <li class="invert1">反転</li> <li class="invert2">反転</li> <li class="invert3">反転</li> </ul> </div> <div class="filter8"> <p>画像の透明度を反転します。 0% 完全に透明、100% 画像変更なし</p> <ul> <li class="opacity1">不透明度</li> <li class="opacity2">不透明度</li> <li class="opacity3">不透明度</li> </ul> </div> <div class="filter9"> <p>画像の彩度を変換します。 0% 完全に不飽和; 100% 完全に飽和</p> <ul> <li class="saturate1">飽和させる</li> <li class="saturate2">飽和させる</li> <li class="saturate3">飽和させる</li> </ul> </div> <div class="filter10"> <p>画像がセピア色に変換されます。値が 100% の場合は濃い茶色、値が 0% の場合は画像に変化はありません</p> <ul> <li class="sepia1">セピア</li> <li class="sepia2">セピア</li> <li class="sepia3">セピア</li> </ul> </div> <div class="filter11"> <p>画像設定の影の効果</p> <ul> <li class="shadow1">影</li> <li class="shadow2">影</li> <li class="shadow3">影</li> </ul> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: 一意の注文番号を生成するためのMySQLの高同時実行方法
>>: HTML チュートリアル: title 属性と alt 属性
コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...
目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...
AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...
序文:場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...
この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...
ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...
さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...
背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...
nginx をインストールApple Mac ではインストールに brew を使用します。brew ...
Windows 10 は Linux サブシステムをサポートするようになり、面倒なデュアル システ...
1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション(データベ...
HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...
目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...
最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...
オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...