CSS - backdrop-filter

• トップ
• CSSリファレンス
• backdrop-filter

概要

説明

背景に対してフィルタ効果をかけます。

none

フィルタ効果を適用しません。デフォルト値です。

<url>

SVGフィルタ画像を指定します。

<filter-function>

filter プロパティを参照してください。drop-shadow() は背景のエッジに対して有効です。何故か背景側の opacity を 1 未満に設定しないとうまく動きません。

使用例

.my-box {
  display: inline-block;
  width: 270px;
  height: 180px;
  margin-right: .5rem;
  margin-bottom: .8rem;
  background: url(../../free/green-moss.jpg) top / 100% 100%;
  opacity: 99%;
}
.my-message {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 230px;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255 255 255 / 30%);
}
.bf-blur { backdrop-filter: blur(5px); }
.bf-brightness { backdrop-filter: brightness(20%); }
.bf-contrast { backdrop-filter: contrast(170%); }
.bf-drop-shadow {
  border: 1px solid #ccc;
  transform: translateX(-85px);
  backdrop-filter: drop-shadow(5px 5px 1px red);
}
.bf-grayscale { backdrop-filter: grayscale(100%); }
.bf-hue-rotate { backdrop-filter: hue-rotate(100deg); }
.bf-invert { backdrop-filter: invert(80%); }
.bf-opacity { backdrop-filter: opacity(50%); }
.bf-saturate { backdrop-filter: saturate(50%); }
.bf-sepia { backdrop-filter: sepia(100%); }

<div class="my-box"><div class="my-message">none</div></div>
<div class="my-box"><div class="my-message bf-blur">blur(5px)</div></div>
<div class="my-box"><div class="my-message bf-brightness">brightness(20%)</div></div>
<div class="my-box"><div class="my-message bf-contrast">contrast(170%)</div></div>
<div class="my-box"><div class="my-message bf-drop-shadow">drop-shadow(5px 5px 1px red)</div></div>
<div class="my-box"><div class="my-message bf-grayscale">grayscale(100%)</div></div>
<div class="my-box"><div class="my-message bf-hue-rotate">hue-rotate(90deg)</div></div>
<div class="my-box"><div class="my-message bf-invert">invert(80%)</div></div>
<div class="my-box"><div class="my-message bf-opacity">opacity(50%)</div></div>
<div class="my-box"><div class="my-message bf-saturate">saturate(50%)</div></div>
<div class="my-box"><div class="my-message bf-sepia">sepia(100%)</div></div>

リンク

• https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty
• https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter
• https://caniuse.com/css-backdrop-filter