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中文网(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好！这是来自php中文网的实例。</p>
</body>
</html>プログラムを実行して試してください。それ
CSS、色の値は通常次の方法で定義されます:
Hex - 例: "#ff0000"
RGB - 例: "rgb(255,0,0)"
色の名前- 「red」など:要素の背景画像を説明します。
デフォルトでは、背景画像は要素エンティティ全体をカバーするように並べて繰り返し表示されます。
ページの背景画像の設定例: <!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>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>
デフォルトでは、background-image プロパティにより、ページが水平または垂直に並べて表示されます。 一部の画像は、以下に示すように、水平方向と垂直方向に並べて配置すると、非常に矛盾して見えます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>上記のプログラムを実行して試してください
背景画像 - 位置を設定するかタイル状にしないかを設定します
背景画像がテキストのレイアウトに影響しないようにします
画像をタイル状にしたくない場合は、background-repeat属性を使用できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>プログラムを実行して試してみてください
上記の例では、ページのレイアウトをより合理的にし、テキストの読み取りに影響を与えないようにするために、背景画像とテキストが同じ位置に表示されます。画像の位置を変更します。
background-position 属性を使用して、背景内の画像の位置を変更できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>プログラムを実行して試してください
Background - 短縮属性
上記の例では、次のことがわかります。ページの背景色が渡されるため、制御する多くのプロパティが渡されます。
これらのプロパティのコードを簡略化するために、これらのプロパティを同じプロパティにマージできます。
背景色の短縮プロパティは「background」です:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>プログラムを実行して試してください
短縮プロパティを使用する場合。 、プロパティ値の順序は次のとおりです:
あなたはそうではありません上記の属性をすべて使用する必要はありません。ページの実際のニーズに応じて使用できます。Property
Description- background
、ステートメントの背景プロパティを設定するために使用されます。
background-attachment
背景画像が固定されているか、ページの残りの部分と一緒にスクロールするか。
background-color
要素の背景色を設定します。
background-image
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
