contain プロパティ
contain プロパティは、エレメントの内容に影響を与えない視覚効果（ぼかし、彩度、影付きなど）を指定する CSS のプロパティです。
似たプロパティに filter プロパティがありますが、contain プロパティはエレメントの内容には影響がなく、後ろの内容だけをぼかし、彩度、影付きといった視覚効果を作成できます。
contain の例です
「ぼかし」の効果がある blur() メソッドを利用する場合は、background-color などで不透明度を指定した背景色を設定する必要があります。
.content {
background-color:rgba(255, 255, 255, 0.2);
contain: blur(3px);
}
詳しくは「Example」を参照してください
filter プロパティは内容の全体がプロパティの指定の影響を受けます。背景のみを変化させたい場合は contain プロパティを使うべきでしょう。
ただし、ブラウザのバージョンによっては使えないかもしれません。
ページ内 Index
- ad -
構文(Syntax)
CSS
contain: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ;
各メソッド は CSS のフィルターに関する <filter-value-list> の値を返します。以下の値（Values）を参照してください。
複数の値が指定可能です。
DOM ( JavaScript )
String = object.style.backdropFilter;
object.style.backdropFilter = " none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ";
値（Values）
| Value | 摘要 |
|---|---|
| none | デフォルト値。設定値なし |
| 以下は <filter-value-list> の値を返す | |
| url( ) | SVG フィルターの URL |
| none | 初期値（default値）。 |
| blur(px) | ぼかし半径。値が大きいほどにぼやかしが大きくなる。 |
| brightness(%) | 明るさ調整。100%がdefault。 |
| contrast(%) | コントラスト調整。100%がdefault。 |
| drop-shadow(h-shadow v-shadow blur spread color) | エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。 |
| grayscale(%) | グレイスケールに加工。0%がdefault。100%で完全な白黒表現。 |
| hue-rotate(deg) | 色相を調整（反対色）。0degでdeafult。360degで反対色。 |
| invert(%) | ネガポジ反転。0%がdefault。100%で完全な反転色。 |
| opacity(%) | 透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。 |
| saturate(%) | 色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。 |
| sepia(%) | セピア加工。0%がdefault。100%で完全なセピア色。 |
| url(URL) | SVGフィルターが設定されたXMLファイルを取得。 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
contain プロパティは、複数の値を組み合わせることができます。
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
以下は contain プロパティの例です。
親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのようになるかを試しています。
contain プロパティが設定されたエレメントの後ろにある内容に「ぼかし」などの効果があることが分かります。
- ad -
関連する CSS プロパティ
関連する CSS プロパティには以下のものがあります。
| プロパティ名 | 概要 |
|---|---|
| contain | 「ぼかし」などの効果をもたせることができる。うしろの内容だけが影響を受ける |
| filter | 「ぼかし」などの効果をもたせることができる。内容全体が影響を受ける |
| position | エレメントの位置を調整 |