CSS のぼかしプロパティの詳細な説明: filter および backdrop-filter

CSS ぼかし属性の詳細な説明: フィルターと背景フィルター

はじめに:
Web ページをデザインするとき、視覚効果を高めるためにいくつかの特殊効果が必要になることがよくあります。ページの魅力。ブラー効果は一般的な特殊効果の 1 つです。 CSS には、filter と backdrop-filter という 2 つのぼかし属性が用意されており、それぞれ要素コンテンツと背景コンテンツをぼかすために使用されます。この記事では、これら 2 つのプロパティについて詳しく説明し、具体的なコード例をいくつか示します。

1. フィルター属性

フィルター属性は、要素のコンテンツをぼかすために使用されます。ガウスぼかし、明るさ調整、コントラスト調整など、さまざまな効果を実現できます。以下は、一般的に使用されるフィルター属性値とその効果の一部です。

1. ガウスぼかし (ぼかし): この属性を使用して、要素にぼかし効果を追加できます。値が大きいほどぼかしが大きくなります。

.blur {
  filter: blur(5px);
}

2. 明るさの調整 (brightness): 要素の明るさは、この属性を通じて調整できます。 1 未満の値は暗くなり、1 より大きい値は明るくなります。

.brightness {
  filter: brightness(0.5);
}

3. コントラスト調整 (コントラスト): 要素のコントラストは、この属性を通じて調整できます。 1 未満の値はコントラストを低下させ、1 を超える値はコントラストを増加させます。

.contrast {
  filter: contrast(2);
}

4. カラー効果の反転 (invert): この属性を使用して、要素にカラー効果の反転を追加できます。

.invert {
  filter: invert(100%);
}

5. 色相回転 (hue-rotate): この属性は要素の色相を回転できます。

.hue-rotate {
  filter: hue-rotate(90deg);
}

2. 背景フィルター属性

背景フィルター属性は、要素の背景コンテンツをぼかすために使用されます。その使用法は filter 属性と似ていますが、要素自体の内容ではなく要素の背景に対して機能します。以下は、一般的に使用される背景フィルターのプロパティ値とその効果の一部です。

1. ガウスぼかし (ぼかし): この属性を使用して、要素の背景にぼかし効果を追加できます。値が大きいほどぼかしが大きくなります。

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. 明るさの調整 (brightness): この属性を通じて要素の背景の明るさを調整できます。 1 未満の値は暗くなり、1 より大きい値は明るくなります。

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. コントラスト調整 (コントラスト): この属性は、要素の背景のコントラストを調整するために使用できます。 1 未満の値はコントラストを低下させ、1 を超える値はコントラストを増加させます。

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. 色の反転効果 (invert): この属性を使用して、要素の背景に反転色の効果を追加できます。

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. 色相回転 (hue-rotate): この属性は要素の背景の色相を回転できます。

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

結論:
CSS のフィルター プロパティと背景フィルター プロパティは、豊富なぼかし効果を提供し、Web ページのデザインをよりカラフルにします。これらの属性を合理的に使用することで、ページはよりクールな効果を表現できます。ただし、これらの属性を使用する場合、ブラウザによっては互換性の問題が発生する可能性があるため、一貫した効果を保証するには実際の使用時に互換性テストが必要であることに注意してください。

参考リンク:

• [MDN Web ドキュメント: フィルター](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN Web ドキュメント: backdrop-filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

以上がCSS のぼかしプロパティの詳細な説明: filter および backdrop-filterの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。