CSS 背景
CSS 背景プロパティは、HTML要素の背景を定義するために使用されます。
CSS プロパティで背景効果を定義する:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color プロパティは、要素の背景色を定義します。
ページの背景色は、bodyセレクタで使用されます:
CSSでは、色の値は通常次のように定義されます:
- 16進数 - 例："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 色名 - 例："red"
以下の例では、h1、p、およびdiv要素は異なる背景色を持ちます:
实例
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
尝试一下 »
背景图像
background-image プロパティは、要素の背景画像を指定します。
デフォルトでは、背景画像はタイル状に繰り返し表示され、要素全体を覆います。
ページ背景画像設定の例:
以下は、テキストと背景画像の組み合わせが悪い例です。テキストの可読性が低くなっています:
背景画像 - 水平または垂直に敷き詰める
デフォルトでは、background-image プロパティはページの水平方向または垂直方向にタイル表示されます。
水平方向と垂直方向の両方にタイル表示すると、見栄えが悪くなる画像もあります。次のようになります:
画像を水平方向にのみタイル表示 (repeat-x) すれば、ページの背景はより良くなります:
背景画像 - 位置指定と敷き詰めなしの設定
背景画像がテキストのレイアウトに影響しないようにする
画像をタイル表示したくない場合は、background-repeat プロパティを使用できます:
上記の例では、背景画像とテキストが同じ位置に表示されています。ページのレイアウトをより合理的にし、テキストの読みやすさに影響を与えないようにするには、画像の位置を変更することができます。
background-position プロパティを使用して、背景内での画像の位置を変更できます:
实例
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
尝试一下 »
背景 - 省略記法プロパティ
上記の例では、ページの背景色が多くのプロパティによって制御されていることがわかります。
これらのプロパティのコードを簡素化するために、それらを1つのプロパティにまとめることができます。
背景色の略記プロパティは "background" です:
略記プロパティを使用する場合、プロパティ値の順序は次のとおりです:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
上記のプロパティはすべて使用する必要はなく、ページの実際のニーズに合わせて使用できます。
この例では、以前に紹介したCSSを使用しています。対応する例を確認できます:CSS 实例
更多实例
固定背景画像を設定する方法
この例では、固定された背景画像の設定方法を示します。画像はページの他の部分と一緒にスクロールしません。
CSS背景プロパティ
| Property | 描述 |
|---|---|
| background | 略記プロパティは、背景プロパティを1つの宣言で設定するものです。 |
| background-attachment | 背景画像が固定されているか、ページの残りの部分とともにスクロールするか。 |
| background-color | 要素の背景色を設定します。 |
| background-image | 画像を背景に設定します。 |
| background-position | 背景画像の開始位置を設定します。 |
| background-repeat | 背景画像を繰り返すかどうか、およびその繰り返し方法を設定します。 |