Jun. 11th,2022
プロパティについて
＃
概要
| 初期値 | “backdrop-filter: none;” |
| 適用対象 | すべての要素(SVGでは“<defs>”要素がないコンテナ要素、すべてのグラフィック要素、“<use>”要素) |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定した値 |
| アニメーション | “フィルター効果の補間”を参照 |
“backdrop-filter”プロパティは要素の背後に適用されるグラフィック・フィルターを指定するプロパティです。
“filter”プロパティはその要素自身に効果を持つグラフィック・フィルターを適用しますが、“backdrop-filter”プロパティはその要素自身に対しては効果を持たず、背後にある領域に効果を持つグラフィック・フィルターを適用します。
値が“none”でない場合、新たな重ね合わせコンテキストが生成されます。要素のすべての子孫要素にもまとめてフィルター効果が適用されます。
サンプルコード
p { backdrop-filter: sepia(100%);}
＃
値
| 値 | 説明 |
|---|---|
| “<filter-value-list>”値 | |
| <url> | SVGの“<filter>”要素で表されるフィルターを参照する (“<svg>”要素や外部のSVGファイルで定義したフィルターを参照することができます。参照先がフィルターではない場合はフィルター・リスト全体が無視されます。) |
| <filter-function> | “blur()”関数や“drop-shadow()”関数などでフィルター効果を指定する |
| 他の値 | |
| none | フィルター効果を適用しない |
| 共通キーワード | |
“<filter-function>”値と“<url>”値はホワイトスペースで区切ることで複数のフィルター効果からなるフィルター・リスト(“<filter-value-list>”値)として指定することができます。複数指定されたフィルター効果は記述された順に適用されます。
“none”キーワードは単独で使用します。
＃
使用例
＃
SVGフィルターを適用する
.bdf-svg {
backdrop-filter: url(sample-backdrop-filter1.svg#sample-svg-backdrop-filter);
}
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<backdrop-filter id="sample-svg-backdrop-filter">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/>
</backdrop-filter>
</svg>
<div>
<p class="bdf-svg">
backdrop-filter: url(sample-backdrop-filter1.svg#sample-svg-backdrop-filter);
</p>
</div>
backdrop-filter: url(sample-backdrop-filter1.svg#sample-svg-backdrop-filter);
＃
＃
＃
