CSS background

CSS 背景：打造网页视觉基石

この記事では、CSS の background プロパティについて掘り下げ、その強力な機能を活用して、ウェブページの要素に豊かで多様な背景効果を追加し、視覚的な魅力を高める方法を詳しく解説します。単色の塗りつぶしからグラデーション、画像背景、さらには背景の位置や繰り返し方法まで、background プロパティのあらゆる側面を網羅的に解説し、個性的なウェブデザインを容易に実現できるようお手伝いします。

副題及び主な内容：

1. `background-color`:

説明: 要素の背景色を設定します。
値の型: 色の値 (色名、16進数、RGB、RGBA、HSL)。

例:


<style>
  .example1 {
    background-color: red; 
  }
  .example2 {
    background-color: #ff0000; 
  }
  .example3 {
    background-color: rgba(255, 0, 0, 0.5); 
  }
</style>

2. `background-image`:

説明: 要素の背景画像を設定します。複数の画像形式 (jpg, png, gif, svg) に対応しています。
値の型: none、画像の URL。

例:


<style>
  .example1 {
    background-image: url("path/to/image.jpg"); 
  }
  .example2 {
    background-image: none; 
  }
</style>

3. `background-repeat`:

説明: 背景画像の繰り返し方法を制御します。
値の型: repeat、repeat-x、repeat-y、no-repeat、space、round。

例:


<style>
  .example1 {
    background-repeat: no-repeat;
  }
  .example2 {
    background-repeat: repeat-x;
  }
  .example3 {
    background-repeat: space; 
  }
</style>

4. `background-position`:

説明: 要素内での背景画像の位置を設定します。
値の型: キーワード (top, bottom, left, right, center)、パーセンテージ、長さの値。

例:


<style>
  .example1 {
    background-position: top left;
  }
  .example2 {
    background-position: 50% 100px; 
  }
</style>

5. `background-attachment`:

説明: スクロールバーのスクロールに合わせて背景画像をスクロールさせるかどうかを定義します。
値の型: scroll、fixed、local。

例:


<style>
  .example1 {
    background-attachment: fixed;
  }
  .example2 {
    background-attachment: scroll; 
  }
</style>

6. `background-clip`:

説明: 背景の描画領域を指定し、背景を境界線やパディングの下まで拡張するかどうかを制御します。
値の型: border-box、padding-box、content-box、text。

例:


<style>
  .example {
    background-clip: content-box;
  }
</style>

7. `background-origin`:

説明: 背景画像の位置決め参照点を指定します。
値の型: border-box、padding-box、content-box。

例:


<style>
  .example {
    background-origin: padding-box; 
  }
</style>

8. `background-size`:

説明: 背景画像のサイズを設定します。
値の型: キーワード (cover, contain)、長さの値、パーセンテージ。

例:


<style>
  .example1 {
    background-size: cover; 
  }
  .example2 {
    background-size: 100px 50px;
  }
</style>

9. `background` 省略形プロパティ:

説明: 複数の背景プロパティを1つのプロパティにまとめて設定することができ、コードの効率を高めることができます。
値の型: 複数の背景プロパティの値をスペースで区切って指定します。

例:


<style>
  .example {
    background: #e0e0e0 url("img.jpg") no-repeat center center / cover;
  }
</style>

10. 複数背景:

説明: カンマで区切って複数の背景値を指定することで、複数の背景効果を作成し、ページに奥行きを持たせることができます。

例:


<style>
  .example {
    background: url("img1.jpg"), url("img2.png");
  }
</style>

まとめ:

background プロパティは、CSS で最も強力かつ柔軟なプロパティの1つです。そのあらゆる側面を学び、マスターすることで、多種多様な背景効果を容易に作成し、ウェブデザインに無限の創造性と視覚的な魅力を添えることができます。

CSS 背景：打造网页视觉基石

副題及び主な内容：

1. background-color:

2. background-image:

3. background-repeat:

4. background-position:

5. background-attachment:

6. background-clip:

7. background-origin:

8. background-size:

9. background 省略形プロパティ: