From 3c43271cedbdff6c57471d0d6474110a4ee6a7bc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Oct 2024 20:03:30 +0900 Subject: [PATCH] =?UTF-8?q?2024/01/03=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/backdrop-filter/index.md | 52 +++++++++++++---------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/files/ja/web/css/backdrop-filter/index.md b/files/ja/web/css/backdrop-filter/index.md index 286cb5603d21d2..6ba34d0ca6b3b5 100644 --- a/files/ja/web/css/backdrop-filter/index.md +++ b/files/ja/web/css/backdrop-filter/index.md @@ -1,11 +1,17 @@ --- title: backdrop-filter slug: Web/CSS/backdrop-filter +l10n: + sourceCommit: 1c4eb0bfb5f72a26fcc21a83fac91aa3e66c2fb8 --- {{CSSRef}} -**`backdrop-filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の*背後*のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。 +**`backdrop-filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後にあるすべてに適用されるため、要素またはその背景が透明または部分的に透明である必要があります。 + +{{EmbedInteractiveExample("pages/css/backdrop-filter.html")}} + +## 構文 ```css /* キーワード値 */ @@ -33,19 +39,16 @@ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; +backdrop-filter: revert-layer; backdrop-filter: unset; ``` -{{EmbedInteractiveExample("pages/css/backdrop-filter.html")}} - -## 構文 - ### 値 - `none` - : 背後にフィルターを適用しません。 - `` - - : 背景に適用する {{cssxref("<filter-function>")}} または [SVG フィルター](/ja/docs/Web/SVG/Element/filter)の空白区切りのリストです。 + - : 背景に適用する {{cssxref("<filter-function>")}} または [SVG フィルター](/ja/docs/Web/SVG/Element/filter)の空白区切りのリストです。CSS の `` には {{CSSxRef("filter-function/blur", "blur()")}}, {{CSSxRef("filter-function/brightness", "brightness()")}}, {{CSSxRef("filter-function/contrast", "contrast()")}}, {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}}, {{CSSxRef("filter-function/grayscale", "grayscale()")}}, {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}}, {{CSSxRef("filter-function/invert", "invert()")}}, {{CSSxRef("filter-function/opacity", "opacity()")}}, {{CSSxRef("filter-function/saturate", "saturate()")}}, {{CSSxRef("filter-function/sepia", "sepia()")}} があります。 ## 公式定義 @@ -61,39 +64,38 @@ backdrop-filter: unset; ```css .box { - background-color: rgba(255, 255, 255, 0.3); - border-radius: 5px; - font-family: sans-serif; - text-align: center; - line-height: 1; - -webkit-backdrop-filter: blur(10px); + background-color: rgb(255 255 255 / 30%); backdrop-filter: blur(10px); - max-width: 50%; - max-height: 50%; - padding: 20px 40px; } -html, body { - height: 100%; - width: 100%; + background-image: url("anemones.jpg"); } +``` +```css hidden +html, body { - background-image: url(https://picsum.photos/id/1080/6858/4574), - linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); - background-position: center center; - background-repeat: no-repeat; - background-size: cover; + height: 100%; + width: 100%; } .container { + background-size: cover; align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } +.box { + border-radius: 5px; + font-family: sans-serif; + text-align: center; + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} ``` ### HTML @@ -121,3 +123,7 @@ body { ## 関連情報 - {{cssxref("filter")}} +- {{cssxref("<filter-function>")}} +- {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}} +- [CSS フィルター効果](/ja/docs/Web/CSS/CSS_filter_effects) +- [CSS 合成と混合](/ja/docs/Web/CSS/CSS_compositing_and_blending)