背景スタイル - Webflow ヘルプ
要素に設定できる背景スタイルの概要: 色、画像、グラデーション、色オーバーレイ、ビデオ。
背景色
画像やビデオを除くすべての要素に背景色を設定できます（ただし、画像やビデオを背景として使用することは可能です）。色の値（例: hex、rgba、または色名）を入力するか、カラーピッカーを使用して背景色を追加します。テキスト要素やテキスト要素内の特定のテキストコンテンツにも背景色を追加できます。
サイト全体で背景色を一貫させたい場合は、継承のためにBody (All pages)タグを使用します。スタイルパネルでBody要素を選択し、タグを選ぶか、継承メニューを使用してスタイルを設定します。Body (All pages)に対する変更は、新しい要素にデフォルトで適用されます。
ほとんどの要素はデフォルトで透明な背景を持っています。スライダーコンポーネントのような一部の要素には、上書き可能なデフォルトの色があります。
背景画像
Webflowは背景画像をカスタマイズするための多くのオプションを提供しています。
背景画像を追加または変更するには:
- スタイルパネルで背景までスクロール
- アセットパネルから画像を選択をクリック
- HiDPIデバイスでより鮮明な画像のために@2xのボックスをチェック
背景ビデオを設定するには、追加パネルで背景ビデオコンポーネントを使用します。
背景画像サイズ
- カスタム: 幅/高さまたはパーセンテージ値を設定。100%以上の値で大きくスケール。
- カバー: 背景を埋め尽くし、画像をトリミングする可能性あり。
- コンテイン: 画像を要素内に収めます。
背景画像の位置
デフォルトは左上です。位置を手動で調整できます（px、%、VW、VH）。
タイル
背景画像はデフォルトで縦横に繰り返されます。横方向、縦方向、または繰り返さないように制御できます。
固定またはスクロール
固定しない（画像がスクロール）または固定（画像がその場に留まる）を選択します。固定画像はビューポートに収まります。
グラデーション
グラデーションは単独で、または背景色/画像に重ねて使用できます。2種類あります：
- 線形グラデーション
- 放射状グラデーション
どちらも色がフェードする停止点があります。
線形グラデーション
ダイヤル、矢印（45度刻み）、またはフィールド入力で角度を設定します。
グラデーション停止点
停止点で色/不透明度を編集します。画像の上に重ねると、低い不透明度で画像が見えます。クリックで停止点を追加し、ドラッグで削除します。
繰り返し
グラデーションの繰り返しを切り替えます。
反転
停止点の位置を反転するアイコン。
放射状グラデーション
円形のグラデーションを作成します。左の停止点は中心の色です。
位置
ドットで焦点を選ぶか、値/単位で手動設定します。
サイズ
プリセットコントロール：
- 最も近い側：中心から最も近い側
- 最も近い角：中心から最も近い角
- 最も遠い側：中心から最も遠い側
- 最も遠い角：（デフォルト）
カラーオーバーレイ
カラーピッカーと不透明度で背景にカラーオーバーレイを追加します。
画像とグラデーションのレイヤリング
複数の背景画像、グラデーション、オーバーレイを重ねて効果を出します。ドラッグで順序を変更し、目のアイコンで表示を切り替え、ゴミ箱で削除します。
背景動画
背景動画は、シネマティックな雰囲気を加えるための無音でループする動画です。注意点：
クイックファインド（CMD/CTRL+E）または追加パネル > コンポーネントから追加します。動画をアップロードします（<30MB; webm, mp4, mov, ogg）。ファイル名にはスペースや特殊文字を避けてください。
アップロード後にトランスコーディングが行われます（ブラウザサポートのためのmp4 & webm）。
動画設定
- 動画をループ: 連続して繰り返します。
- 動画を自動再生: ページ読み込み時に開始します。
- 再生/一時停止ボタンを含む: 訪問者が再生を制御できます。
背景動画のプレビュー
- サムネイルにホバー
- 新しいタブで開く
- バーのプレビューアイコン
背景動画の置き換え
設定を開いて動画を置き換え、トランスコード、プレビューなどを行います。
背景動画をセクションとして使用する
背景動画要素内にコンテンツをドロップします。スタイルパネルで通常通りスタイルを設定します。
背景動画のオーバーレイ
コントラストをつけるためにグラデーションや単色のオーバーレイを追加します。オーバーレイは動画の上にあり、コンテンツの下にあります。
以上がWebflowでの背景の使用方法です！