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中文网(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>低头思故乡。</p>
</div>
</body>
</html>Background-image
background-image 属性は、要素の背景画像を記述します。
デフォルトでは、背景画像は要素エンティティ全体をカバーするように並べて表示されます。
ページの背景画像の設定例:
<!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>明天你好！！</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)。
背景画像 - 位置を設定するか、タイル状にしないかを設定します
背景画像がテキストのレイアウトに影響しないようにします
画像をタイル状にしたくない場合は、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>明天你好！！</h1>
</div>
</body>
</html>上の例では、背景画像とテキストが同じ位置に表示されていますが、ページレイアウトをより合理的にし、テキストの読みに影響を与えないようにするために、画像の位置を変更できます。
background-position 属性を使用して、背景内の画像の位置を変更できます
background-position:right top;
background-abbreviation 属性
上の例では、ページは多くの属性制御によって決定されます。
これらの属性のコードを簡略化するために、これらの属性を同じ属性にマージできます。
背景色の省略属性は「background」です。
省略属性を使用する場合、属性値の順序は次のとおりです。 is::
background-color
background-image
background-repeat
background-attachment
background-position
上記の属性をすべて使用する必要はありません。以下に応じて使用できます。ページの実際のニーズ。
次のセクション