CSSの背景
CSS Background
CSS 背景プロパティは、HTML 要素の背景を定義するために使用されます。
CSS プロパティは背景効果を定義します:
background-color
background-image
background-repeat
background-attachment
ground -position
背景色
background-color 屬性は要素の背景色を定義します
ページの背景色は本文セレクターで使用されます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 頁!</h1>
<p>你好！這是來自php中文網(wǎng)的實例。</p>
</body>
</html>プログラムを?qū)g行して試してください。それ
CSS、色の値は通常次の方法で定義されます:
Hex - 例: "#ff0000"
RGB - 例: "rgb(255,0,0)"
色の名前- 「red」など:要素の背景畫像を説明します。
デフォルトでは、背景畫像は要素エンティティ全體をカバーするように並べて繰り返し表示されます。
ページの背景畫像の設(shè)定例: <!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>CSS background-color 實例!</h1>
<div>
改文本插入在 div 元素中。
<p>該段落有自己的背景顏色。</p>
我們?nèi)匀辉谕粋€ div 中。
</div>
</body>
</html>
デフォルトでは、background-image プロパティにより、ページが水平または垂直に並べて表示されます。 一部の畫像は、以下に示すように、水平方向と垂直方向に並べて配置すると、非常に矛盾して見えます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>畫像が水平方向にのみ並べて配置されている場合 (repeat-x)、ページの背景が改善されます。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>上記のプログラムを?qū)g行して試してください
背景畫像 - 位置を設(shè)定するかタイル狀にしないかを設(shè)定します
背景畫像がテキストのレイアウトに影響しないようにします
畫像をタイル狀にしたくない場合は、background-repeat屬性を使用できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>プログラムを?qū)g行して試してみてください
上記の例では、ページのレイアウトをより合理的にし、テキストの読み取りに影響を與えないようにするために、背景畫像とテキストが同じ位置に表示されます。畫像の位置を変更します。
background-position 屬性を使用して、背景內(nèi)の畫像の位置を変更できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>終于為那一身江南煙雨覆了天下，容華謝后，不過一場，山河永寂。</p>
<p>千秋功名，一世葬你，玲瓏社稷，可笑卻無君王命</p>
</body>
</html>プログラムを?qū)g行して試してください
Background - 短縮屬性
上記の例では、次のことがわかります。ページの背景色が渡されるため、制御する多くのプロパティが渡されます。
これらのプロパティのコードを簡略化するために、これらのプロパティを同じプロパティにマージできます。
背景色の短縮プロパティは「background」です:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景圖片不重復(fù)，設(shè)置 position 實例。</p>
<p>背景圖片只顯示一次，并與文本分開。</p>
<p>實例中還添加了 margin-right 屬性用于讓文本與圖片間隔開。</p>
</body>
</html>プログラムを?qū)g行して試してください
短縮プロパティを使用する場合。 、プロパティ値の順序は次のとおりです:
あなたはそうではありません上記の屬性をすべて使用する必要はありません。ページの実際のニーズに応じて使用できます。Property
Description- background
、ステートメントの背景プロパティを設(shè)定するために使用されます。
background-attachment
背景畫像が固定されているか、ページの殘りの部分と一緒にスクロールするか。
background-color
要素の背景色を設(shè)定します。
background-image
