CSS3の新しい背景プロパティの詳細な説明

CSS3の新しい背景プロパティの詳細な説明

これまで、CSS の背景の属性には、color、image、repeat、attachment、position などいくつかありました。これらは CSS でよく使用されますが、CSS3 で追加された新しい属性は何でしょうか。下を見てください:

**

新しい CSS3 プロパティ: background-clip、background-origin、background-size

1.背景クリップ

背景のクリッピングプロパティは、指定された位置から描画を開始することです。

**

**

2.背景の起源

background-origin プロパティは、背景画像が配置される領域を指定します。

** 上記の 2 つのプロパティ値は、border-box、padding-box、content-box です (ボックス モデルを十分に理解しておくことをお勧めします。ここでは、これら 3 つのプロパティ値を見るだけで明らかになります)、または次の図を参照してください。

ここに画像の説明を挿入

背景クリップは、対応する効果を得るために、これら3つの位置のいずれかでクリッピングを開始することと同じです。コードを参照してください。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スタイル>
    #div1 {
      境界線: 20px 破線の青;
      パディング:40px;
      背景: 赤;
    }

    #div2{
      境界線: 20px 破線の青;
      パディング:40px;
      背景: 赤;
      背景クリップ: パディングボックス;
    }

    #div3{
      境界線: 20px 破線の青;
      パディング:40px;
      背景: 赤;
      背景クリップ: コンテンツボックス;
    }
  </スタイル>
</head>
<本文>

<p>背景クリッピングなし(境界ボックスが定義されていません):</p>
<div id="div1">
  <h2>ロレム・イプサム・ドロール</h2>
  <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p>
</div>

<p>背景クリップ: パディングボックス:</p>
<div id="div2">
  <h2>ロレム・イプサム・ドロール</h2>
  <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p>
</div>

<p>背景クリップ: コンテンツボックス:</p>
<div id="div3">
  <h2>ロレム・イプサム・ドロール</h2>
  <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p>
</div>
</本文>
</html>

効果画像:

ここに画像の説明を挿入ここに画像の説明を挿入

そしてbackground-originは背景が表示される領域です。コードを参照してください

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スタイル>
    分割
    {
      border:1px 黒一色;
      パディング:35px;
      background-image:url('1 (5).jpg');/*画像が表示できない場合は、自分で変更する必要があります*/
      背景繰り返し:繰り返しなし;
      背景の位置:左;
    }
    #div1 {
      background-origin: border-box;/*padding-boxを設定しても同じ効果がありますので、ご自身で試してみてください*/
    }
    #div2 {
      背景の原点: コンテンツボックス;
    }
  </スタイル>
</head>
<本文>
<p>背景画像の境界ボックスの相対位置</p>
<div id="div1">
  <h2>ロレム・イプサム・ドロール</h2>
  <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p>
</div>
<p>背景画像はコンテンツ ボックスに対して相対的に配置されます</p>
<div id="div2">
  <h2>ロレム・イプサム・ドロール</h2>
  <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p>
</div>
</本文>
</html>

効果:

ここに画像の説明を挿入

**

3.背景サイズ

background-size は背景画像のサイズを指定します。 CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。 CSS3 の background-size プロパティを使用すると、さまざまな環境で背景画像のサイズを変更できます。サイズはピクセルまたはパーセンテージで指定できます。指定するサイズは、親要素の幅と高さに対するパーセンテージです。

属性値:

①.lengthは背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定されている場合、2 番目の値は自動に設定されます。

②.lpercentageは背景配置領域に対するパーセンテージを計算します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が1つだけ指定されている場合、2番目の値は「自動」に設定されます。

③.coverは画像のアスペクト比を維持し、背景配置領域を完全に覆う最小サイズに画像を拡大縮小します。

④.contain は画像のアスペクト比を維持し、背景配置領域内に収まる最大サイズに画像を拡大縮小します。

要約する

上記は、私が皆さんに紹介した CSS3 の新しい背景プロパティです。皆さんのお役に立てれば幸いです。ご質問があれば、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MYSQL(電話番号、IDカード)データ非感応化の実装

>>:  UCenter ホームサイトに統計コードを追加

推薦する

Vueでショッピングカートのすべての機能を実装する簡単な方法

主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...

Linux でスワップ領域を確認する 5 つのコマンドの概要

序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...

React+tsは二次リンク効果を実現します

この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

MacOS に MySQL 8.0 をインストールして MySQL にログインする方法

公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...

Linux 上での Go 環境の構築のインストールと設定の説明

Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....

Vueがビデオアップロード機能を実装

この記事では、参考までに、ビデオアップロード機能を実現するためのVueの具体的なコードを紹介します。...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...