css3でサポートされているフィルターは何ですか?

css3 でサポートされるフィルターは、filter 属性によって定義される視覚効果で、次のものが含まれます: 1. 画像にガウスぼかしを設定できるぼかしフィルター、2. 明るさフィルター、3. コントラスト フィルター、4. ドロップ シャドウフィルタ; 5. グレースケール フィルタ; 6. 色相回転フィルタ; 7. 画像反転フィルタ; 8. 透明度フィルタ; 9. 彩度フィルタ; 10. セピア フィルタ。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 でサポートされるフィルターは、filter 属性によって定義される視覚効果です。

フィルター属性を設定できる機能(視覚効果)

1.ぼかしフィルター(px)

画像にガウスぼかしを設定します。値が大きいほどぼやけます。デフォルトは 0 (ぼかしなし) です。

filter:blur(4px);

2. 明るさフィルター (%)

画像に線形乗算を適用して、画像を明るくまたは暗くします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変化しません。他の値は線形乗数効果に対応します。 100% 以上の値でも問題なく、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。

 filter: brightness(200%);

3. コントラスト フィルター (%)

画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値は 100% で、画像は変更されません。値は 100% を超える可能性があり、より低い比較が使用されることを意味します。値が設定されていない場合、デフォルトは 1 です。

 filter: contrast(200%);

4. 投影フィルター (x オフセット y オフセットぼかし範囲カラー)

は box-shadow 属性と非常によく似ていますが、違いは、フィルターを使用すると一部のブラウザーでパフォーマンスが向上することです。ハードウェアアクセラレーション。

 filter: drop-shadow(8px 8px 10px red);

5. グレースケール フィルター (%)

画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。設定されていない場合、値はデフォルトの 0 になります。 0 ～ 1 の間の小数を書くこともできます。

 filter:grayscale(0.5);

6. 色相回転フィルター (度)

画像に色相回転を適用します。画像内の色を色相環内でそれに応じて回転させます。値が 0deg の場合、画像に変化はありません。値が設定されていない場合、デフォルト値は 0deg です。この値には最大値はありませんが、360degを超えると一周したことと同じになります。

 filter: hue-rotate(90deg);

7. 画像反転フィルタ (%)

入力画像を反転します。値は変換のスケールを定義します。値の 100% は完全な反転です。値 0% は、画像に変化がないことを意味します。 0% から 100% までの値は、効果の線形乗数です。値が設定されていない場合、値はデフォルトの 0 になります。

 filter: invert(100%);

8. 透明度フィルター (%)

画像の透明度。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。 0 ～ 100% の間で部分的に透明になります。 % の代わりに 0 ～ 1 の小数を使用することもできます。
これは既存の不透明度属性とよく似ていますが、一部のブラウザではフィルターを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供される点が異なります。

 filter: opacity(30%);

9. 彩度フィルター (%)

値 0% は完全に彩度が無いことを意味し、値 100% は画像に変化がないことを意味します。 100%を超えると彩度が上がり、色が重くなります。

 filter: saturate(800%);

10. セピアフィルター (%)

画像をセピアに変換します。値が 100% の場合は完全にセピアになり、値が 0% の場合は画像が変更されません。 0% から 100% までの値は、効果の線形乗数です。設定されていない場合、値はデフォルトの 0 になります。

 filter: sepia(100%);

使用コード:

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

(学習ビデオ共有: css ビデオ チュートリアル、Web フロントエンド)

以上がcss3でサポートされているフィルターは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。