CSSの背景
CSS Background
CSS 背景プロパティは、HTML 要素の背景を定義するために使用されます。
CSS プロパティは背景効果を定義します:
background-color
background-image
background-repeat
background-attachment
background-position
background-color
background-color プロパティは、
CSS では、色の値は通常次の方法で定義されます:
Hex - 例: "#ff0000"
RGB - 例: "rgb(255,0,0)"
Color名前 - 例: " red"
次の例では、h1、p、および div 要素の背景色が異なります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>靜夜思</h1>
<div>
床前明月光，
<p>疑是地上霜。</p>
舉頭望明月，
<p>低頭思故鄉(xiāng)。</p>
</div>
</body>
</html>Background-image
background-image 屬性は、要素の背景畫像を記述します。
デフォルトでは、背景畫像は要素エンティティ全體をカバーするように並べて表示されます。
ページの背景畫像の設(shè)定例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片背景測試</title>
<style>
body
{
background-image:url('http://pic.58pic.com/58pic/14/94/21/80U58PICPJM_1024.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>明天你好?。?lt;/h1>
</body>
</html>背景畫像 - 水平または垂直のタイル
デフォルトでは、background-image 屬性は水平または垂直にタイル表示されます。ページ上で。
一部の畫像は、以下に示すように、水平方向と垂直方向に並べて配置すると、非常に矛盾して見えます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片背景測試</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>畫像が水平方向にのみ並べて配置されている場合 (repeat-x)、畫像が水平方向にのみ並べて配置されている場合 (repeat-y)。
背景畫像 - 位置を設(shè)定するか、タイル狀にしないかを設(shè)定します
背景畫像がテキストのレイアウトに影響しないようにします
畫像をタイル狀にしたくない場合は、background-repeat 屬性を使用できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片背景測試</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
background-repeat:no-repeat
}
</style>
</head>
<body>
<div>
<h1>明天你好?。?lt;/h1>
</div>
</body>
</html>上の例では、背景畫像とテキストが同じ位置に表示されていますが、ページレイアウトをより合理的にし、テキストの読みに影響を與えないようにするために、畫像の位置を変更できます。
background-position 屬性を使用して、背景內(nèi)の畫像の位置を変更できます
background-position:right top;
background-abbreviation 屬性
上の例では、ページは多くの屬性制御によって決定されます。
これらの屬性のコードを簡略化するために、これらの屬性を同じ屬性にマージできます。
背景色の省略屬性は「background」です。
省略屬性を使用する場合、屬性値の順序は次のとおりです。 is::
background-color
background-image
background-repeat
background-attachment
background-position
上記の屬性をすべて使用する必要はありません。以下に応じて使用できます。ページの実際のニーズ。
