CSSのさまざまな背景、使用シナリオ、テクニックの詳細な分析

この記事はGitHub https://github.com/qq449245884/xiaozhiに掲載されています。記事は分類されており、私のドキュメントやチュートリアル資料の多くが整理されています。

CSS background 、最もよく使用される CSS プロパティの 1 つです。ただし、すべての開発者が複数のコンテキストの使用を認識しているわけではありません。この期間は、さまざまな背景シーンの使用に重点が置かれてきました。この記事では、background-image プロパティを詳しく見ていき、グラフィックを使用して複数の背景の使用方法とその実用的な利点を説明します。

CSS 背景プロパティについてまだ知っている場合は、まず MDN にアクセスして関連する知識を確認してください。

導入

CSS のbackgroundプロパティは、次のプロパティの省略形です。

background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。

この記事では、 background-image 、 background-position 、 background-sizeに焦点を当てます。準備はできたか？さあ始めましょう！

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

。要素 {
  背景: url(cool.jpg) 左上/50px 50px 繰り返しなし;
}

背景画像は要素の左上隅に配置され、サイズは50px * 50pxです。位置とサイズの順序を理解して覚えておくことが重要です。

上記の画像では、 background-positionの後にbackground-sizeが続きます。順序を変更することはできません。変更すると、以下に示すように無効になります。

。要素 {
	/* 警告: 無効な CSS */
	背景: url(cool.jpg) 50px 50px/左上 繰り返しなし;
}

背景の位置

要素の配置は、 background-originプロパティによって設定された配置レイヤーを基準とします。私は、要素を配置する方法を複数にできるbackground-positionの柔軟性が気に入っています。

キーワードの値（ top 、 right 、 bottom 、 left 、 center ）
パーセンテージ値、例: 50%
長さの値、例: 20px 、 2.5rem
エッジオフセット値、例: top 20px left 10px

座標系は左上隅から始まり、デフォルト値は0% 0%です。

top leftの値はleft topの値と同じであることに留意してください。ブラウザは、 x軸にどれを使用し、 y軸にどれを使用するかを判断できるほど賢いです。

。要素 {
	背景: url(cool.jpg) 左上/50px 50px 繰り返しなし;
	/* 上記は下記と同じです*/
	背景: url(cool.jpg) 左上/50px 50px 繰り返しなし;
}

背景サイズ

background-sizeプロパティの場合、最初の値はwidth 、2 番目の値はheightです。

2 つの値を使用する代わりに、幅と高さが同じになる 1 つの値を使用できます。

CSS background仕組みがわかったので、複数の背景を使用する方法を調べてみましょう。

複数の背景

backgroundプロパティには、カンマで区切られた 1 つ以上のレイヤーを含めることができます。複数の背景が同じサイズの場合、一方が他方を覆います。

。要素 {
	背景: url(cool.jpg) 左上/50px 50px 繰り返しなし、
	url(cool.jpg) center/50px 50px 繰り返しなし;
}

上の画像には、2 つの背景レイヤーがあります。場所によってそれぞれ異なります。これは複数のコンテキストの基本的な使用法です。より高度な例を見てみましょう。

配置順序

複数の背景を配置し、そのうちの 1 つが親の背景の幅と高さ全体を占める場合、配置の順序が少し乱れることがあります。次の例を検討してください。

。ヒーロー {
  最小高さ: 350px;
  背景: url('table.jpg') 中央/カバー 繰り返しなし、
    url('konafa.svg') center/50px 繰り返しなし; 
}

お皿とテーブルの写真がありますが、どちらが上になると思いますか?

答えは表です。 CSS では、最初の背景を 2 番目の背景の上に配置したり、2 番目の背景を 3 番目の背景の上に配置したりすることができます。背景の順序を入れ替えることで、期待どおりの結果が得られます。

使用例と例

マスクレイヤー

多くの場合、テキストを読みやすくするために、特定のセクションの上にマスクレイヤーを配置する必要があります。これは、2 つの背景を積み重ねることで簡単に実行できます。

。ヒーロー {
	背景: 線形グラデーション(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

良い点は、上記と同じ方法を使用して要素に色合いを適用できることです。次の点を考慮してください。

。ヒーロー {
	背景: 線形グラデーション(135度, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

CSSで描画する

CSS グラデーションの使用の可能性は無限です。 linear-gradientやradial-gradientなどを使用できます。次に、ノートパソコンを描くときにどのように使用するかを見てみましょう。

ラップトップを分解して、どのようなグラデーションを使用する必要があるかを確認します。

ラップトップを分析する場合、複数の CSS 背景を使用してそれを実現する方法を考える方が簡単です。

次は図面です。まず最初に、各グラデーションを CSS 変数として定義し、そのサイズを定義します。 CSS 変数を使用するとコードの複雑さが軽減され、コードがわかりやすくなり、読みやすくなるので、私は CSS 変数を使うのが好きです。

：根 {
  --case: 線形グラデーション(#222, #222);
  --ケースサイズ: 152px 103px;

  --display: 線形グラデーション(#fff, #fff);
  --表示サイズ: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --反射サイズ: 78px 78px;

  --body: 線形グラデーション(#888, #888);
  --body-size: 182px 9px;

  --circle: 放射状グラデーション(9px 9px at 5px 5.5px, #888 50%, 透明 50%);
  --円のサイズ: 10px 10px;
}

グラデーションとそのサイズを定義したので、次のステップはそれらを配置することです。よりわかりやすい視覚的な説明のために、次の画像をご覧ください。

画像を表示

前述したように、最初に最上部に配置する必要がある要素を定義する必要があります。この場合、表示される画像は最初のグラデーションになります。

ディスプレイLCD

ディスプレイは、 x軸の中心、y 軸から6px位置にあります。

ディスプレイハウジング

シェルはディスプレイの下、X 軸の中心、Y 軸から0pxの距離に配置されます。

本体

これはグラフの最も興味深い要素です。まず、本体は長方形で、各辺（左と右）に 2 つの円があります。

最終結果

：根 {
  --case: 線形グラデーション(#222, #222);
  --ケースサイズ: 152px 103px;
  --case-pos: 中心 0;

  --display: 線形グラデーション(#fff, #fff);
  --表示サイズ: 137px 87px;
  --display-pos: 中央 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --反射サイズ: 78px 78px;
  --reflection-pos: 右上;

  --body: 線形グラデーション(#888, #888);
  --body-size: 182px 9px;
  --body-pos: 中央下;

  --circle: 放射状グラデーション(9px 9px at 5px 5.5px, #888 50%, 透明 50%);
  --円のサイズ: 10px 10px;
  --circle-left-pos: 左下;
  --circle-right-pos: 右下;
}

。いいね {
  幅: 190ピクセル;
  高さ: 112px;

  背景画像: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  背景サイズ: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  背景位置: var(--reflection-pos)、var(--display-pos)、var(--case-pos)、var(--circle-left-pos)、var(--circle-right-pos)、var(--body-pos);

  背景繰り返し: 繰り返しなし;

  /*アウトライン: 実線 1px;*/
}

さまざまな背景を持つ

複数の背景を混ぜると面白いですね。 CSS に背景画像があり、それを白黒に変換したいとします。

。ヒーロー {
  背景: 線形グラデーション(#000, #000)、
  url("landscape.jpg") center/cover;
  背景ブレンドモード: 色;
}

オリジナル: https://css-tricks.com/css-basics-using-multiple-backgrounds/

コードをデプロイした後で、どのようなバグが存在するかをリアルタイムで知る方法はありません。後からこれらのバグを解決するために、ログのデバッグに多くの時間を費やしていました。ここで、便利なバグ監視ツールである Fundebug をお勧めしたいと思います。

CSS のさまざまな背景、使用シナリオ、テクニックを詳細に分析したこの記事はこれで終わりです。CSS のさまざまな背景や使用シナリオに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML 内の CSS および JS リンクのバージョン番号 (キャッシュを更新)

>>: 表示または可視性によってHTML要素を非表示にする