🦏 👉🏼 🧡 CSSと複数の背景 🙎🏻 😡 ✌🏽

CSSプロパティbackgroundは、最も一般的に使用されるプロパティの1つです。しかし、Web開発コミュニティは、複数のバックグラウンドが提供する可能性をまだ十分に認識していません。ここでは、複数のバックグラウンドで何ができるのか、標準のCSSメカニズムを最大限に活用する方法について真剣に話します。

この記事では、プロパティについて詳しく説明しbackground-image、要素の複数の背景画像を共有する例を示し、このアプローチの長所を検討します。ここにはたくさんのイラストがあります。 CSSプロパティに慣れていない場合は、資料を読む前に、このプロパティ専用のこのMDNドキュメントページを確認するとよいでしょう。

background

前書き

CSSプロパティbackgroundは、次の一般的な要素プロパティを設定できるようにする省略形のプロパティです。

背景クリップ
背景色
背景画像
背景-起源
背景位置
背景-繰り返し
背景サイズ
背景-添付ファイル

ここでは、性質に焦点を当てるbackground-image、background-positionとbackground-size。

次の例を考えてみましょう。

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}

背景画像の開始位置は、要素の左上隅です。画像サイズは50px * 50pxです。プロパティを設定するときbackgroundは、背景画像の位置とサイズを定義するプロパティの順序を覚えておくことが重要です。

画像のパス、位置、サイズ

前の図でbackground-positionは、プロパティの設定に関連する値の後にプロパティ値が続きますbackground-size。これらの値を別の順序で配置すると、CSSのスタイルが正しくなくなります。たとえば-このように：

.element {
  /* :  CSS */
  background: url(cool.jpg) 50px 50px/top left no-repeat;
}

背景画像の位置

背景の領域、つまり背景画像の元の位置を設定するには、プロパティを使用しますbackground-origin。プロパティが提供する柔軟性が大好きbackground-positionです。これにより、要素の背景をさまざまな方法で配置できます。

キーワード（top、right、bottom、left、center）。
パーセンテージ値。例：50%。
特定の距離を指定する値。例：20px 2.5rem。
要素の端からのパディングを表す値。例：top 20px left 10px。

座標系

背景画像を配置するときに使用される座標系の原点は、要素の左上隅にあります。プロパティの初期値background-positionは0% 0%です。

valuetop leftはvalueと同じであることに注意してくださいleft top。ブラウザは、この値のどれだけがX軸にあり、どれだけがY軸にあるかを把握するのに十分スマートです。

左上と左上は同じです。

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /*  -   ,    */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}

背景画像サイズ

背景画像のサイズを設定するプロパティの名前は、background-sizeこのプロパティの役割を一意に示します。背景画像のサイズは、その幅と高さです。このプロパティを設定するときは、最初の値が幅で、2番目の値が高さであることに注意してください。

幅が最初に来て、次に高さ

背景画像の幅と高さが同じである場合、これは、に2つの値を指定する必要がないことを意味しますbackground-size。このような状況では、1つの値で十分です。

ここで、ちなみに、 CSS仕様では、これについて次のように述べていると便利です。「値が1つだけ指定されている場合、2番目の値はautoであると見なされます。」ただし、このメカニズムはブラウザには実装されていませんが、将来変更される可能性があります。この詳細に注意を向けてくれたIlyaStreltsynに感謝します。

1つの値で幅と高さの両方を設定

するプロパティの使用の基本backgroundについて説明したので、複数の背景を操作する方法について説明します。

複数の背景

プロパティbackgroundは、1つの背景レイヤーを説明できますが、これまでのところ、そのような説明、または-プロパティがコンマで区切られている複数のレイヤーを説明してきました。複数の背景画像が同じサイズの場合、そのうちの1つが他の画像と完全に重なっています。

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}

複数の背景画像の使用

上の図では、要素に2層の背景画像があります。これらの画像はそれぞれ異なる位置にあります。これは、複数の背景を使用する最も簡単な例です。次に、より高度な例を見てみましょう。

背景画像を積み重ねる順序

要素に複数の背景画像を装備する場合、そのうちの1つが親要素の幅と高さ全体を占める場合、背景を積み重ねる順序が重要になります。背景を積み重ねる順序を決定するのは難しい場合があります。次の例を考えてみましょう。

.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}

ここに、テーブル画像（table.jpg）とプレート画像（konafa.svg）があります。これらの背景画像のどれが最初に表示されると思いますか？テーブルの画像ですか、それともプレートの画像ですか？

2つの背景画像を持つ要素

この質問に対する正しい答えは、最初にテーブル画像を用意することです。CSSでは、最初に記述された背景が2番目の背景にオーバーレイされ、2番目の背景が3番目の背景にオーバーレイされます。背景の説明順序を変更すると、要素での表示に影響します。

.hero {
  background: url('konafa.svg') center/50px no-repeat,
  url('table.jpg') center/cover no-repeat;
}

最初の背景が2番目の背景に重ねられてい

ますご覧のとおり、最初の背景で指定された背景は、2番目の背景で指定された背景の上にあります。

無地

要素のCSS背景ツールを使用してモノクロの背景を作成するとします。どうやってするの？これは、CSSグラデーションのおかげで、簡単です。ポイントはlinear-gradient、同じストップカラーの関数を使用すると、単色になるということです。

.hero {
  background: linear-gradient(#3c88Ec, #3c88Ec)
}

線形グラデーションと同じストップカラー

で作成された背景これは、グラデーションを使用して背景を設定する簡単な例ですが、実際には、グラデーションを使用して非常に興味深く便利な効果を作成できます。

使用例と実際の例

▍暗い背景画像

多くの場合、ページの上部のテキストを読みやすくするために、そのセクションの背景画像を暗くする必要があります。2つの背景画像でこれを行うのは簡単です。

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

暗くなった背景画像

さらに興味深いことに、同じ方法を使用して要素の背景画像に色を付けることができます。

.hero {
  background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

着色された背景

▍CSSによる描画

ペイントにCSSグラデーションを使用する可能性は本当に無限大です。特に、関数linear-gradientなどradial-gradientを使用して記述された勾配について話します。この簡単な例では、グラデーションを使用してラップトップを描画する方法を理解します。

ラップトップの画像

この画像を分解して、必要なグラデーションについて考えてみましょう。

プラスチック製のディスプレイフレーム、LCDディスプレイ、反射、ケースの丸みを帯びたエッジ、ケース

ラップトップを「分解」すると、複数の背景を適用する手法を使用して描画するために必要なグラデーションを簡単に把握できることに注意してください。あなたは私がラップトップケースの丸い角として機能するためにいくつかの円を使用したことに気づいたかもしれません。重要なのは、角が丸いグラデーションを作成する標準的な方法がないということです。

それでは、描き始めましょう。まず、各グラデーションをCSS変数として定義し、対応する要素のサイズを設定しましょう。CSS変数を使用すると、コードの複雑さが軽減され、コードがよりクリーンになり、読みやすくなるため、私はCSS変数を使用するのが好きです。グラデーションについて説明したら、それらの配置に進むことができます。

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}

そこで、グラデーションについて説明し、サイズを設定しました。それでは、それらの位置付けについて考えてみましょう。この問題の解決は、以下のラップトップの概略図によって容易になります。

ラップトップの概略図

ラップトップディスプレイフレームからの光の反射の実装

すでに述べたように、他のすべてのレイヤーの上に配置する必要がある背景レイヤーを最初に定義する必要があります。この場合、最初の勾配は、ラップトップのディスプレイフレームからの光の反射をシミュレートする勾配になります。

ラップトップのディスプレイフレームからの光の反射

LCDディスプレイ

ラップトップディスプレイはX軸の中心に配置され、Y軸は6原点からピクセル単位でオフセットされます。

ラップトップディスプレイ

ディスプレイフレーム

フレームはディスプレイの下にあり、X軸の中心にあり、Y軸では0px原点からオフセットされています。

ディスプレイフレーム

ラップトップケース

そして、これは最も興味深い要素です。まず、ラップトップケースを表す要素が長方形であり、ケースのエッジが丸いという事実を考慮に入れる必要があります。これは、円のペアを使用することによって実現されます。

ラップトップケース

完成した描画

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}

これがあなたが試すことができるCodePenプロジェクトです。

▍複数の背景を混合する

背景を重ね合わせたさまざまなモードの混合を使用できるため、さまざまな効果を実現するための広い範囲が開かれます。この手法を使用する最も簡単な方法は、画像の彩度を下げることです。CSSに、彩度を下げたい黒と白の色付きの背景画像があるとします。

カラー画像と黒の補助レイヤー

次のCSSスニペットはプロパティを使用していることに注意してくださいbackground-blend-mode: color。これにより、目的の効果を得ることができます。

.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

彩度の低い画像

CSSで複数の背景を使用していますか？

CSSと複数の背景

前書き