CSSの背景プロパティは、HTML要素の背景を定義します。
CSSプロパティは、背景の影響を定義します。
背景色
背景画像
背景リピート
背景アタッチメント
背景位置
背景色
背景色プロパティは、要素の背景色を定義します。
のセレクタ本体内のページの背景色:
例
本体{背景色:#1 b0c4de;}
CSSは、カラー値は、通常、次のように定義されています。
六角 - など: "#FF0000の"
RGB - 如: "RGB(255,0,0)"
色の名前 - など:「赤」
次の例では、H1、P、およびdiv要素は、異なる背景色を持っています:
例
H1 {背景色:#6495ed;}
P {背景色:#1 e0ffff;}
DIV {背景色:#1 b0c4de;}
背景画像
背景画像の属性は、背景画像の要素について説明します。
デフォルトでは、背景画像を繰り返し、全固体素子を覆うためにタイル状に表示されます。
ページの背景画像の設定例:
例
本体{背景画像:URL( 'paper.gif');}
以下は、テキストと背景画像の悪い組み合わせの例です。テキストの読みやすさの違い:
例
本体{背景画像:URL( 'bgdesert.jpg');}
背景画像 - 水平または垂直タイル
背景画像のプロパティは、デフォルトでは、ページの水平方向または垂直方向に播種します。
次のように水平方向の画像タイルの数と垂直方向は、これは、非常に協調的に見える場合:
例
体
{
背景画像:のURL( 'gradient2.png');
}
画像は水平方向にのみタイル(リピート-Xを)であれば、ページの背景が良いだろう。
例
体
{
背景画像:のURL( 'gradient2.png');
背景リピート:リピート - X;
}
背景画像 - セットポジションと無タイル
背景画像は、テキストレイアウトに影響を与えませんしましょう
あなたがイメージタイルをしたくない場合は、バックグラウンド・リピートプロパティを使用することができます。
例
体
{
背景画像:のURL( 'img_tree.png');
背景リピート:なしリピート;
}
たとえば上記、背景画像とテキストが同じ場所に表示され、ページレイアウトがより合理的にするために、テキストの読み取りには影響しません、我々は、画像の位置を変更することができます。
背景位置属性は、バックグラウンドで画像の位置を変更するために利用され得ます。
例
体
{
背景画像:のURL( 'img_tree.png');
背景リピート:なしリピート;
背景位置:右上;
}
背景 - 速記プロパティ
上記の例では、制御するための属性の多くによってページの背景色を見ることができます。
これらの属性のコードを簡素化するために、我々はこれらの属性が同じプロパティに組み合わされて使用することができます。
「背景」の短縮形プロパティの背景色:
例
本体{背景:#FFFFFF URL( 'img_tree.png')無反復右上;}
速記プロパティを使用する場合は、属性値の順::
背景色
背景画像
背景リピート
背景アタッチメント
背景位置
上記のすべてのプロパティは、ページの実際のニーズに応じて使用することができ、使用する必要はありません。
CSSの例:この例では、前述のCSSを使用して、あなたは例を見ることができます
CSSの背景プロパティ
プロパティ説明
背景速記プロパティは、backgroundプロパティの役割は声明の中で設定されています。
背景アタッチメント背景画像が固定またはページの残りの部分をスクロールしている場合。
背景色は、背景色の要素を設定します。
背景画像として背景画像。
背景画像の開始を設定することにより、バックグラウンド位置。
背景リピート設定するかどうか、どのように背景画像が繰り返されます。(編集:Leilin鵬出典:削除されたネットワーク侵入)