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

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-imagebackground-positionbackground-sizeに焦点を当てます。 準備はできたか? さあ始めましょう!

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

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

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

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

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

背景の位置

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

  • キーワードの値( toprightbottomleftcenter
  • パーセンテージ値、例: 50%
  • 長さの値、例: 20px2.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-gradientradial-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要素を非表示にする

推薦する

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...

Nginx+SSL による双方向認証を実装するためのサンプル コード

まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...

HTMLでのフォーム送信の実装

フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...

MySQLのslave_exec_modeパラメータの詳細な説明

今日、slave_exec_modeというパラメータを偶然見ました。マニュアルの説明から、このパラメ...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

Linux に Python 3.8.1 をインストールするための詳細なチュートリアル

この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...

Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Obse...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

Docker-compose インストール db2 データベース操作

db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...

VMware 仮想マシンのインストール Apple Mac OS の超詳細なチュートリアル

目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...

JSで実施された機雷掃海プロジェクトの概要

この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...

純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)

純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...

さまざまなブラウザでのhrタグの説明

通常、人事担当者と会うことはめったにありませんが、一度会うと、それが生死を分けることもあります。 H...

Windows 上で Zookeeper サーバーを構築するチュートリアル

インストールと設定Apacheの公式ウェブサイトには多くのミラーダウンロードアドレスが用意されており...