背景フィルター

背景フィルターを利用してオーバーレイし、背景コンポーネントに独特の視覚効果を生成することで、前景コンテンツのレベルを引き立てます。また、デザイン内の各背景フィルターを即座にプレビューすることもできます。カスタム コードは一切必要ありません。

重要： 背景フィルターは現在ベータ版です。これらのスタイルは、Firefox にサポートが統合されるまで、Webflow デザイナーまたは公開されたサイトでは Firefox に正確に表示されません。現在のブラウザー サポートを参照してください。

このチュートリアルでは、次の内容について説明します。

1. 背景フィルターの定義
2. バックグラウンドフィルターの動作
3. 要素に背景フィルターを追加する

背景フィルターの定義

背景フィルターを任意の要素に統合すると、要素の境界内の透明な領域にフィルター効果 (ぼかし、色の変化、コントラストなど) を実装できます。透明な領域を通して要素の背後に見えるものはすべて、背景フィルターの影響を受けます。

1 つの要素に複数の背景フィルターを実装することもできます。背景フィルターを積み重ねたり結合したりして、さまざまな視覚効果を生み出すことができます。

重要な詳細: 背景フィルターは要素の背後にあるすべてのものに適用されるため、効果を確認するには、要素、要素の一部、またはその背景をある程度透明にする必要があります。

背景フィルターとフィルターの比較

背景フィルターはフィルターと同じ効果をもたらしますが、1 つの大きな違いがあります。背景フィルターは要素とその子孫ではなく、要素の背後の領域のみに適用されます。逆に、フィルターは要素とその子孫に直接影響し、要素の背後にあるものには影響を与えません。

バックグラウンドフィルターの動作

Webflowの スタイルパネル 8個入り 背景フィルター の中に 効果 category。同様に動作するフィルターは、[背景フィルター] ドロップダウンにグループ化されています。これらのフィルター グループは次のもので構成されます。

• 一般（ぼかし）
• 色の変更（明るさ、コントラスト、色相回転、彩度）
• カラー効果（グレースケール、反転、セピア）

ある程度透明なコンテンツを持つ要素に適用された場合、各背景フィルターがどのように機能するかを見てみましょう。

一般的な

ぼかし

ぼかし コンテンツにガウスぼかしを適用します。 ぼかし半径 ぼかしの強度を決定します。値が大きいほどぼかしが強くなり、値が小さいほどぼかしが弱くなります。

色の変更

輝度

輝度 コンテンツの明るさを調整して、より明るくしたり暗くしたりします。明るさの度合いを調整できます。100% 未満の値では明るさが下がり、100% を超える値では明るさが上がります。

対比

対比 コンテンツのコントラストを増幅または減少させます。大きさを調整できます。100% 未満の値はコントラストを低下させ、100% を超える値はコントラストを高めます。

色相回転

色相回転 標準のカラー サークル全体に存在する色相に基づいて、コンテンツの全体的な色相を変更します。カラー サークルの周囲で色相が変化する度合いを調整できます。角度が小さい (例: 10 度) と寒色系の色相が表示され、角度が大きい (例: 340 度) と暖色系の色相が表示されます。360 度を超える度数を手動で入力すると、カラー サークルが循環します (例: 400 度は 40 度と同じに見えます)。 

飽和

飽和 コンテンツの彩度を増減するように調整できます。100% 未満の値では彩度が低下し、100% を超える値では彩度が上昇します。 

色の効果

グレースケール

グレースケール コンテンツをグレースケールに変換します。強度を変更できます。100% 未満の値ではグレースケール効果が低下し、100% 以上の値では完全なグレースケール コンテンツが表示されます。 

反転

反転 コンテンツの色を反転して変更します。効果は変更できます。100% 未満の値では反転効果が軽減され、100% 以上の値ではコンテンツが完全に反転して表示されます。

セピア

セピア コンテンツをセピア色に変更します。レベルを調整できます。100% 未満の値ではセピア効果が弱まり、100% 以上の値ではコンテンツ全体がセピア色で表示されます。

背景フィルターを要素に組み込む方法

デザインしたどの要素にも背景フィルターを適用できます。効果を視覚化するには、要素のコンテンツに透明度を持たせます。これは、SVG または PNG 画像を使用したり、要素の背景を透明にしたり、要素の不透明度を下げたりすることで実現できます。 

使ってみましょう ぼかし 要素の背景フィルター: 

1. 選ぶ あなたの要素
2. アクセス スタイルパネル > 効果 > 背景フィルター
3. クリック 「プラス」アイコン 背景フィルターの横
4. 開く フィルター ドロップダウンメニュー 利用可能なフィルターを表示するには
5. ホバー フィルターの上に重ねて効果をプレビューします
6. 選択する ぼかし ドロップダウンメニューから 
7. ぼかしを調整する 半径 要素のぼかしレベルを設定する
8. 背景フィルター設定からクリックして 保存 あなたの変更

複数のフィルターを重ねたい場合は、同じ手順を繰り返します。フィルターの組み合わせはレイヤーとして表示され、ドラッグ アンド ドロップで配置を柔軟に調整できます。

交互に 見える そして 隠れた 各背景フィルター効果の状態: 

1. アクセス スタイルパネル > 効果 > 背景フィルター
2. ホバー 希望するフィルターの上に重ねて隠したり表示したりします
3. クリックしてください 「目」の紋章 フィルターの表示を変更する

フィルターの設定をカスタマイズするには: 

1. アクセス スタイルパネル > 効果 > 背景フィルター
2. 見つける フィルター 変更したい設定にアクセスする
3. 調整を実施する 変更を保存するには、フィルターの設定を終了します

フィルターを削除するには: 

1. アクセス スタイルパネル > 効果 > 背景フィルター
2. ホバー 消去したいフィルターの上に
3. クリックしてください "ごみ" アイコン

追加リソース: スタイル パネルの詳細をご覧ください。