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中文网(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

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

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear