CSS のフィルター属性とバックドロップフィルターの適用と違いの詳細な説明

フィルターとバックドロップフィルターにはいくつかの違いがあります。

• フィルターは現在の要素だけでなく、子孫要素にも適用されます。背景が空である要素には影響しません。
• バックドロップフィルターはレイヤーを通して下の要素をぼかします
• backdrop-filter プロパティを使用すると、要素の背後の領域にグラフィック効果 (ぼかしや色の変化など) を追加できます。 これは要素の背後にあるすべての要素に適用されるため、効果を確認するには、要素またはその背景を少なくとも部分的に透明にする必要があります。
• 現在、backdrop-filter は、特に Android モバイル デバイスでは互換性が低くなっています。

フィルター属性

まず、フィルター属性についてお話ししましょう。CSS3 のフィルター属性はシンプルで使いやすく、強力です。これらの効果を画像に適用して、独自の特殊効果を実現できます。そして現在、すべての主流ブラウザはすでにこの属性をサポートしています。

上の図から、ほとんどのブラウザの互換性が良好であることがわかります。

コードで直接見てみましょう。

体 {
  ディスプレイ: フレックス;
  幅: 100%;
  高さ：100vh;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}

.img {
  幅: 500ピクセル;
  高さ: 500px;
}

<本文>
    <img src="./img/kyoto.jpg" class="img フィルター">
</本文>

何も処理せずに、Web ページの中央に写真を定義します。

これが元の画像の効果です。

次に、フィルターのより重要なプロパティのいくつかを見てみましょう。

不透明度

不透明度は透明度を表し、値は 0 から 1 までの小数です。値が大きいほど透明度は低くなります。

。フィルター{
  フィルター: 不透明度(.3);
}

次の図に示すように:

ぼかし

blur は画像にガウスぼかし効果を使用するように設定できます。単位値は px です。いわゆるガウスぼかしは、2 次元ガウス分布の確率密度関数による画像の畳み込みを指します。

簡単に言えば、ガウスぼかしは、人間の目では物体がより遠く、より速く見える効果をシミュレートするためによく使用されます。写真処理では、背景を遠くに見せるためにガウスぼかしを適用し、前景の人物や物体を強調することがよくあります。いわゆる「最初に撮影し、後でフォーカスする」テクニックでも、ガウスぼかし効果が使用されます。視点が急速に移動しているような効果を作りたい場合は、背景にガウスぼかしを使用することもできます。

。フィルター {
  フィルター: ぼかし(2px);
} 

反転する

invert は反転色を設定できます。値は 0 ～ 1 の小数です。

。フィルター {
  フィルター: 反転(1);
} 

飽和する

彩度は写真の彩度を設定できます。値の範囲は数値です。デフォルト値は 1 で、100% を意味します。

。フィルター {
  フィルター: 飽和(5);
}

たとえば、ここでは彩度を以下のように 500% に設定しています。

グレースケール

グレースケールはグレースケールを表し、その値は 0 から 1 の間です。

。フィルター {
  フィルター: グレースケール(1);
}

下の図は、グレースケールが 1、つまりグレースケールが 100% の場合の効果を示しています。

また、エフェクトパラメータに値がない場合、次の設定に示すように、デフォルトで 1 (100%) になります。

。フィルター {
  フィルター: グレースケール();
}

セピア

セピアは写真の茶色を表現し、ほとんどの写真美化ソフトウェアのノスタルジックな効果に似ています。値もグレースケールと同じ 0 ～ 1 です。

。フィルター {
  フィルター: セピア(1);
}

色相回転

Hue-rotate は画像の色相を変更するために使用されます。デフォルト値は 0deg で、値は angle です。

。フィルター {
  フィルター: 色相回転(90度);
} 

Hue-rotate は通常、さまざまな効果を表現するために CSS アニメーションで使用されます。たとえば、バッテリー充電アニメーションでは、高さが垂直軸に沿って上昇するにつれて、hue-rotate 値が徐々に変化します。ここでは git イメージをアップロードできないため、静止画像のみが表示されます。

輝度

明るさは画像の明るさを変更できます。デフォルト値は 100%、つまり 1 です。

。フィルター {
   フィルター: 明るさ(2);
} 

対比

コントラストはコントラストを意味します。この属性の値は彩度に似ており、値も数値です。

。フィルター {
  フィルター:コントラスト(2.5);
}

ここでは、コントラストが 250% の場合の効果を以下のように示します。

ドロップシャドウ

drop-shadow プロパティは box-shadow に似ており、画像に影を追加します。

。フィルター {
  filter: drop-shadow(20px 20px 10px 20px #000) /**水平方向の影の位置、垂直方向の影の位置、ぼかし距離、影の色**/
} 

背景フィルターのプロパティ

backdrop-filter属性の以下の特徴を振り返ってみましょう。

• バックドロップフィルターはレイヤーを通して下の要素をぼかします
• backdrop-filter プロパティを使用すると、要素の背後の領域にグラフィック効果 (ぼかしや色の変化など) を追加できます。 これは要素の背後にあるすべての要素に適用されるため、効果を確認するには、要素またはその背景を少なくとも部分的に透明にする必要があります。
• 現在、backdrop-filter は、特に Android モバイル デバイスでは互換性が低くなっています。

上記はテキストを見ただけでは理解しにくいので、直接コードを見ていきます。

<div class="コンテナ">
  <div class="content"></div>
  <div class="filter">
    エリートが隔離され、エリートが住む場所に座ることは可能ですか。その場所に居心地のよさがある可能性はありますか?
    貪欲な、
    個々の発明家たちの労働を構成するその体と時間的な賞賛こそが、真実であると言われるものそのものである。
    広告
  </div>
</div>

コンテナ要素 div を定義します。その子要素は、content と filter の 2 つの div 要素です。

体 {
  マージン: 0;
  パディング: 0;
}

。容器 {
  幅: 100%;
  高さ：100vh;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  背景色: 水色;
}

。コンテンツ {
  位置: 絶対;
  下部: 40%;
  幅: 300ピクセル;
  高さ: 300px;
  背景色: 青紫;
}

。フィルター {
  位置: 絶対;
  下部: 0;
  幅: 100%;
  高さ: 50%;
  フォントサイズ: 32px;
  zインデックス: 20;
}

上記の要素を使用すると、次のレイアウトが得られます。

この時点で、フィルター要素を

。フィルター {
  位置: 絶対;
  下部: 0;
  幅: 100%;
  高さ: 50%;
  フィルター: ぼかし(5px);
  zインデックス: 20;
  フォントサイズ: 32px;
}

コードから、filter: blur(5px)を追加しました。下の図に示すように、フィルター要素 div とその中のテキスト コンテンツがぼやけていることがわかります。

しかし、スタイルを次のように変更すると

。フィルター {
  位置: 絶対;
  下部: 0;
  幅: 100%;
  高さ: 50%;
  背景フィルター: ぼかし(5px);
  zインデックス: 20;
  フォントサイズ: 32px;

}

backdrop-filter: blur(5px) 要素を使用すると、次のレイアウトが得られます。

フィルター要素の DIV のみがぼやけており、サブコンテンツのテキストはまったく影響を受けていないことがわかりました。

。フィルター {
  位置: 絶対;
  下部: 0;
  幅: 100%;
  高さ: 50%;
  背景色: チョコレート;
  背景フィルター: ぼかし(5px);
  zインデックス: 20;
  フォントサイズ: 32px;

}

ただし、フィルター要素の背景色をチョコレート色に設定すると、ぼかし効果はほとんど見えなくなります。

または、コンテンツ要素 DIV の背景色を削除します。

。コンテンツ {
  位置: 絶対;
  下部: 40%;
  幅: 300ピクセル;
  高さ: 300px;
} 

そのため、効果を確認するには、要素またはその背景を少なくとも部分的に透明にする必要があります。

backdrop-filter プロパティは最新バージョンのブラウザの一部でのみ有効であることが判明したため、現時点ではこのプロパティの互換性は低いです。

CSS のフィルター属性とバックドロップフィルターの適用と違いについての記事はこれで終わりです。CSS フィルターとバックドロップフィルターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。