CSS CSS 背景プロパティについてまだ知っている場合は、まず MDN にアクセスして関連する知識を確認してください。 導入 CSS の
この記事では、 次の例を考えてみましょう。 。要素 { 背景: url(cool.jpg) 左上/50px 50px 繰り返しなし; } 背景画像は要素の左上隅に配置され、サイズは 上記の画像では、 。要素 { /* 警告: 無効な CSS */ 背景: url(cool.jpg) 50px 50px/左上 繰り返しなし; } 背景の位置 要素の配置は、
座標系は左上隅から始まり、デフォルト値は 。要素 { 背景: url(cool.jpg) 左上/50px 50px 繰り返しなし; /* 上記は下記と同じです*/ 背景: url(cool.jpg) 左上/50px 50px 繰り返しなし; } 背景サイズ
2 つの値を使用する代わりに、幅と高さが同じになる 1 つの値を使用できます。 CSS 複数の背景
。要素 { 背景: 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 グラデーションの使用の可能性は無限です。 ラップトップを分解して、どのようなグラデーションを使用する必要があるかを確認します。 ラップトップを分析する場合、複数の 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 軸から 本体 これはグラフの最も興味深い要素です。 まず、本体は長方形で、各辺(左と右)に 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 リンクのバージョン番号 (キャッシュを更新)
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...
目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...
まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...
フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...
今日、slave_exec_modeというパラメータを偶然見ました。マニュアルの説明から、このパラメ...
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...
この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...
入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Obse...
目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...
db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...
目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...
この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...
純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...
通常、人事担当者と会うことはめったにありませんが、一度会うと、それが生死を分けることもあります。 H...
インストールと設定Apacheの公式ウェブサイトには多くのミラーダウンロードアドレスが用意されており...