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 ホームサイトに統計コードを追加