CSS 背景 背景
CSS には 5 つの主要な背景プロパティがあります。それらは次のとおりです:
background-color: 塗りつぶされた背景の色を指定します。
background-image: 背景として畫像を引用します。
background-position: 要素の背景畫像の位置を指定します。
background-repeat: 背景畫像を繰り返すかどうかを決定します。
background-attachment: 背景畫像がページとともにスクロールするかどうかを決定します。
これらのプロパティはすべて、背景という 1 つの短縮プロパティに組み合わせることができます。注意すべき重要な點の 1 つは、背景がパディングや境界線を含む要素のコンテンツ領域のすべてを占めるが、要素のマージンは含まれないということです。 Firefox、Safari、Opera、IE8 では正常に動作しますが、IE6 と IE7 では、背景は境界線としてカウントされません。
Background-color
background-color プロパティは、背景を単色で塗りつぶします。この色を指定するにはさまざまな方法がありますが、次の方法はすべて同じ結(jié)果をもたらします。
background-color: blue;
background-color: rgb (0, 0, 255);
background-color を透明に設定することもできます。それは見える。
Background-image background-image 屬性を使用すると、背景に表示される畫像を指定できます。背景色と組み合わせて使用??できるため、畫像が繰り返されない場合、畫像で覆われていない領域は背景色で塗りつぶされます。コードは非常に単純です。パスはスタイル シートに対する相対パスであることに注意してください。そのため、次のコードでは、畫像とスタイル シートが同じディレクトリにあります。
background-image: url(image.jpg);
ただし、畫像がimagesというサブディレクトリにある場合は、次のようにする必要があります:
background-image: url(images/image.jpg);
<html>
<head>
<style type="text/css">
body {background-image: url(這個地方要寫的就是你的圖片的url地址了);}
</style>
</head>
<body>
</body>
</html>
Background-repeat背景畫像を設定すると、デフォルトで畫像は要素全體を覆うように水平方向と垂直方向に並べて表示されます。これは必要なことかもしれませんが、畫像を 1 回だけ表示したり、一方向にのみ並べて表示したりしたい場合もあります?？赡埭试O定値と結(jié)果は次のとおりです:
background-repeat:repeat; /* デフォルト値、水平および垂直にタイリング */
background-repeat: no-repeat; /* タイリングなし。寫真は一度だけ表示されます。 */
background-repeat:repeat-x; /* 水平方向に並べて表示します (x 軸に沿って) */
background-repeat:repeat-y; /* 垂直方向に並べて表示します (y 軸に沿って) */
background-repeat: respect; /* 親要素のbackground-repeat屬性を継承します*/
<html>
<head>
<style type="text/css">
body
{
background-image:url(圖片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>背景の省略屬性背景のさまざまな屬性を個別に記述するのではなく、1行にまとめることができます毎回出てくる。形式は次のとおりです:
background: ?color? ?image? ?position? ?attachment? ?repeat?
たとえば、次のステートメントは次のとおりです。
background-color: traditional;
background-image: url (image.jpg);
background-position: 50% 0;
background-repeat:repeat-y;
背景: 透明 URL (image.jpg) 50% 0 スクロールrepeat-y;
また、すべての値を指定する必要はありません。値を省略した場合は、屬性のデフォルト値が使用されます。たとえば、上の行は次と同じ効果があります:
background: url (image.jpg) 50% 0repeat-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(圖片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各個屬性間并無順序</p>
<p>各個屬性間并無順序</p>
<p>各個屬性間并無順序</p>
<p>各個屬性間并無順序</p>
</body>
</html>
