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>你好世界！这是来自 W3CSchoolphp中文网的实例。</p>

</body>
</html>

インスタンスを実行»

「実行」をクリックします。 「インスタンス」ボタンをクリックしてオンライン例を表示します

CSS では、色の値は通常次の方法で定義されます:

  • Hex - 例: "#ff0000"

  • RGB - 例: "rgb (255,0,0)"

  • 色の名前 - 例: "red"

次の例では、h1、p、および div 要素の背景色が異なります:

Instance

<!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('https://img.php.cn/upload/article/000/000/015/5c67d689a8a95760.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

これはサンプルの例ですテキストと背景画像の組み合わせが悪い。テキストの可読性が低い:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
	body {background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7253c8e5996.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>

</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

背景画像 - 水平または垂直に並べて表示します

デフォルトでは、background-image プロパティがタイル表示されますページを水平方向または垂直方向に移動します。

一部の画像は、以下に示すように、水平方向と垂直方向に並べて配置すると、非常に矛盾して見えます:

インスタンス

源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
    background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

运行结果：
php工具

インスタンスの実行»

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

画像が水平方向にのみ並べて配置されている場合 (repeat-x)、ページの背景がより良くなります:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
	background-repeat:repeat-x;
}
</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('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>

</html>

サンプルの実行 »

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

上記の例では、背景画像とテキストを同じ位置に表示しています。ページレイアウトをより合理的にし、テキストの読み取りに影響を与えないように、画像の位置を変更できます。

background-position 属性を使用して、背景内の画像の位置を変更できます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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>

インスタンスを実行する»

オンライン インスタンスを表示するには、[インスタンスを実行] ボタンをクリックします

背景 - 略記属性

上の例では、ページの背景色が多くの属性によって制御されていることがわかります。

これらのプロパティのコードを簡素化するには、これらのプロパティを同じプロパティにマージします。

背景色の省略形プロパティは「background」です:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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>

インスタンスを実行»

クリック" 「インスタンスを実行」ボタンをクリックすると、オンライン インスタンスが表示されます

短縮属性を使用する場合、属性値の順序は次のとおりです:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

上記の属性をすべて使用する必要はありません。ページの実際のニーズに応じて使用できます。

この例では、前に紹介した CSS を使用します。対応する例を表示できます: CSS の例

その他のマルチインスタンス

固定背景画像の設定方法

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
body 
{
background-image:url('https://img.php.cn/upload/image/904/696/399/1546677458497154.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>

</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして、オンラインインスタンスを見る

この例は、固定背景画像を設定する方法を示します。画像はページの残りの部分と一緒にスクロールしません。

CSS 背景プロパティ

PropertyDescription
background略語プロパティ。ステートメントで背景プロパティを設定するために使用されます。
background-attachment 背景画像が固定されているか、ページの残りの部分と一緒にスクロールするか。
background-color 要素の背景色を設定します。
background-image画像を背景として設定します。
background-position背景画像の開始位置を設定します。
background-repeat 背景画像を繰り返すかどうか、およびどのように繰り返すかを設定します。