From 8a27a0dc2bfb9ecca2816ce333902efbd79c68c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 19:20:33 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/backdrop-filter/index.md | 123 +++++++++++++----------------- 1 file changed, 55 insertions(+), 68 deletions(-) diff --git a/files/ja/web/css/backdrop-filter/index.md b/files/ja/web/css/backdrop-filter/index.md index 4cbe5f5bc1..6f72884ec9 100644 --- a/files/ja/web/css/backdrop-filter/index.md +++ b/files/ja/web/css/backdrop-filter/index.md @@ -4,28 +4,29 @@ slug: Web/CSS/backdrop-filter tags: - CSS - CSS プロパティ - - Graphics - - Layout - - Reference + - グラフィック + - レイアウト + - NeedsContent + - リファレンス - SVG - SVG フィルター - - Web - ウェブ - - グラフィック - - レイアウト + - recipe:css-property +browser-compat: css.properties.backdrop-filter translation_of: Web/CSS/backdrop-filter --- -
{{CSSRef}}
+{{CSSRef}} -

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

+**`backdrop-filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の*背後*のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 backdrop-filter: none;
 
 /* SVG フィルターへの URL */
 backdrop-filter: url(commonfilters.svg#filter);
 
-/* <filter-function> 値 */
+/*  値 */
 backdrop-filter: blur(2px);
 backdrop-filter: brightness(60%);
 backdrop-filter: contrast(40%);
@@ -43,31 +44,33 @@ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
 /* グローバル値 */
 backdrop-filter: inherit;
 backdrop-filter: initial;
+backdrop-filter: revert;
 backdrop-filter: unset;
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+- `none` + - : 背後にフィルターを適用しません。 +- `` + - : 背景に適用する {{cssxref("<filter-function>")}} または [SVG フィルター](/ja/docs/Web/SVG/Element/filter)の空白区切りのリストです。 -
-
none
-
背後にフィルターを適用しません。
-
<filter-function-list>
-
背景に適用する {{cssxref("<filter-function>")}} または SVG フィルターの空白区切りのリストです。
-
+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

CSS

+### CSS -
.box {
+```css
+.box {
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   font-family: sans-serif;
@@ -99,47 +102,31 @@ body {
   justify-content: center;
   height: 100%;
   width: 100%;
-}
- -

HTML

- -
<div class="container">
-  <div class="box">
-    <p>backdrop-filter: blur(10px)</p>
-  </div>
-</div>
-
- -

結果

- -

{{EmbedLiveSample("Example", 600, 400)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.backdrop-filter")}}

- -

関連情報

- - +} +``` + +### HTML + +```html +
+
+

backdrop-filter: blur(10px)

+
+
+``` + +### 結果 + +{{EmbedLiveSample("Examples", 600, 400)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("filter")}} -- cgit v1.2.3-54-g00ecf