メインコンテンツにスキップ

画像ボックス:画像に背景加工をする

エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのフィルターや、背景画像のサイズ調整、リピート、位置調整の方法を説明します。

今日アップデートされました

Point:画像ボックスのBoxモードとImgモード

画像ボックスには「Boxモード」と「Imgモード」があり、モードによって画像の扱い方や設定可能な機能が異なります。

詳細は、画像ボックス:BoxモードとImgモードのページを参照してください。

画像に背景加工をする

画像の背景加工ができるのは、Boxモードの画像のみです。あらかじめ対象の画像をBoxモードへ切り替えてください。

Tips: Imgモードの画像にフィルターを設定する

ボックスのフィルター設定で、Imgモードの画像にフィルターをかけることができます。

設定方法などの詳細は、ボックスの外観:フィルターを設定するを参照してください。

  1. 対象のボックスを選択します。

  2. 右パネルで[画像]タブを選択します。

    パネルが閉じている場合は、右パネルを開いてください。

  3. 画像タブの下部でそれぞれ以下の設定を行います。

    • 背景位置 (background-position)

    • 繰り返し (background-repeat)

    • 背景サイズ (background-size)

    • フィルター


背景画像の位置を調整する

[背景位置]フィールドで、画像の基点位置を調整できます。

デフォルトは中央ですが、画像ボックスの「ポジション」から中央、上下左右、四隅のいずれかに変更できます。


背景画像の繰り返し(リピート)

[繰り返し]フィールドにチェックをすると、画像をタイル状に繰り返して表示します。余白部分に画像が繰り返し表示されます。


サイズ調整 (background-size)

背景画像のサイズを指定する際や、一部を表示したい場合に使用します。以下の4つの方法があります。

1. cover

背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。ボックスサイズを横幅100%に設定すると、画像を画面幅最大に設定することができます。

2. contain

背景領域に収まる最大サイズになるように画像を拡大縮小します。

3. px (ピクセル)

画像の比率は変えずに横幅を指定できます。親ボックスよりも画像が大きい場合は、はみ出た部分が切り取られます。

4. %(パーセンテージ)

背景領域に対する画像の幅をパーセンテージで指定します。レスポンシブデザインに対応する際に便利です。


背景画像にフィルターを設定する

画像には、以下のフィルターを設定できます。

  • 明るさ

  • コントラスト

  • 彩度

  • モノクロ

  • セピア

  • ぼかし

それぞれの視覚効果の詳細は、ボックスの外観:フィルターを設定する > フィルターを参考にしてください。


image picture filter

イメージ 写真 素材

こちらの回答で解決しましたか?