- background-color: 要素の背景色を設定します。
- background-image: 要素の背景画像を設定します。
- background-repeat: 背景画像を繰り返すかどうかを制御します。
- background-attachment: 背景画像がウィンドウと共にスクロールするかどうかを制御します。
- background-position: 要素内の背景画像の位置を制御します。
- background-size: 背景画像のサイズを設定します。
- background-origin: 背景画像を配置する位置に相対的な background-position 属性を設定します。
- background-clip: 背景画像の表示領域を設定します。
- background: background プロパティの略で、すべての背景プロパティを 1 つのステートメントで設定できます。
1.背景色
次のプロパティ値をサポートする background-color プロパティを使用して、要素の背景色を設定できます。
| 価値 | 説明 |
|---|---|
| color_name | 特定の色名 (redなど) を使用して要素の背景色を設定する |
| hex_number | 16 進数コード (例: #ff0000) を使用して要素の背景色を設定します。 |
| rgb_number | 要素の背景色を設定するには、rgb() 関数を使用します (例: rgb(255,0,0))。 |
| transparent | デフォルトでは、背景色は透明に設定されていますが、これはほとんどの場合使用しません。ただし、要素に背景色を持たせたくない場合、またはユーザーのブラウザー設定 (夜間モードや目の保護モードをオンにするなど) がデザインに影響を与えたくない場合は、transparent を使用して背景色を設定できます。色を透明に |
| inherit | 親要素から背景色の設定を継承する |
[例] 要素の背景色を設定するには、background-color を使用します。
<!DOCTYPE html>
<html>
<head>
<title>CSS 背景</title>
<style>
#bg {
color: white;
background-color: blue;
margin: 20px; /*外側マージンを20ピクセルに設定*/
padding: 20px; /*内側パディングを20ピクセルに設定*/
border: 10px dotted yellow; /*幅10ピクセルの黄色点線ボーダーを設定*/
}
</style>
</head>
<body>
<p id="bg">background-color プロパティ</p>
</body>
</html> 実行結果は次の図のとおりです。
実行結果からわかるように、background-color プロパティは、要素のコンテンツ、内側の余白、および境界領域を塗りつぶす無地の背景色を要素に設定できます (境界として理解することもできます)。その中のすべての領域)、要素の場合、境界線 (マージン) の外側の領域は効果がありません。
CSS の色については、セクション「 CSS の色」を参照してください。
2.背景画像
background-image は要素の背景画像を設定するために使用されます. デフォルトでは, ブラウザは要素コンテンツの左上隅から開始します.背景画像を繰り返して要素領域全体を埋めるには、background-repeat プロパティを使用して、背景画像を繰り返すかどうか、またはどのように繰り返すかを制御できます。
background-image 属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| url(‘URL’) | 画像へのパス。url() は関数と考えることができます。括弧内の URL は画像の特定のパスです。 |
| none | デフォルト、背景画像は表示されません |
| inherit | 親要素から背景画像の設定を継承する |
[例] background-image 属性を使用して、画像 [] を要素の背景画像として設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: red;
background-image: url('./background-image.png');
margin: 20px; /*外側余白を20pxに設定*/
padding: 20px; /*内側余白を20pxに設定*/
border: 10px dotted red; /*幅10pxの赤い点線の枠線を設定*/
}
</style>
</head>
<body>
<p id="bg">background-image 属性</p>
</body>
</html> 実行結果は次の図のとおりです。
背景画像の適用範囲は背景色と同じで、要素のコンテンツ、パディング、境界領域も塗りつぶし、要素の境界の外側の領域 (余白) には影響しません。 ）。
3. バックグラウンドリピート
デフォルトでは、背景画像は要素のコンテンツの左上隅から (パディングがある場合は要素のパディング領域の左上隅から) 開始し、背景画像を水平方向および垂直方向に繰り返して要素領域全体を埋めます (要素の余白領域), you can use the background-repeat attribute to set the whether or how to repeat the background image. この属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| repeat | デフォルトでは、背景画像は縦横に繰り返されます |
| repeat-x | 背景画像は水平方向にのみ繰り返されます |
| repeat-y | 背景画像は垂直方向にのみ繰り返されます |
| no-repeat | 背景画像は一度だけ表示され、どの方向にも繰り返されません |
| inherit | 親要素から background-repeat プロパティの設定を継承する |
[例] background-repeat プロパティを使用して、背景画像を水平方向にのみ繰り返します。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: black;
background-image: url('./bg-image.png');
background-repeat: repeat-x; /*背景画像を繰り返す*/
margin: 20px; /*外側余白を20pxに設定*/
padding: 20px; /*内側余白を20pxに設定*/
border: 10px dotted red; /*10pxの赤い点線枠線を設定*/
}
</style>
</head>
<body>
<p id="bg">background-repeat 属性</p>
</body>
</html> 実行結果は次の図のとおりです。
4. 背景位置
background-position 属性は、背景画像の開始位置を設定するために使用されます. この属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| left top（左上）、 left center（左中央）、 left bottom（左下）、 right top（右上）、 right center（真ん中右）、 right bottom（右下）、 center top（中上）、 center bototm、 中央下 |
いくつかのキーワードを使用して背景画像の位置を示します。最初のキーワードのみを設定すると、2 番目のキーワードがデフォルトで中央に配置されます |
| x% y% | 要素の左上隅から背景画像までの距離をパーセンテージで表します。x% は水平方向、y% は垂直方向、左上は 0% 0%、右下は 100% 100% のみを設定した場合最初の値、次に別の値は 50%、デフォルトは 0% 0% |
| xpos ypos | ピクセル (px) またはその他の CSS 単位を使用して、背景画像と要素の左上隅の間の距離を示します。xpos は水平方向、ypos は垂直方向、左上隅は 0px 0px、右下隅は 0px です。コーナーは要素のサイズに依存します. パーセンテージと単位の形式は混在できます. 最初の値のみを設定すると、他の値はデフォルトで 50% になります. |
[例] background-position 属性を使用して、背景画像の位置を設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: black;
background-image: url('./bg-image.png');
background-repeat: no-repeat;
background-position: 0% 50%;
margin: 20px; /*外側余白を20pxに設定*/
padding: 20px; /*内側余白を20pxに設定*/
border: 10px dotted red; /*10pxの赤い点線枠線を設定*/
}
</style>
</head>
<body>
<p id="bg">background-position プロパティ</p>
</body>
</html> 実行結果は次の図のとおりです。
5.背景添付
background-attachment 属性は、背景画像を特定の位置に固定するか、ページとともにスクロールするかを設定するために使用されます. この属性のオプション値は次のとおりです:
| 価値 | 説明 |
|---|---|
| scroll | デフォルトでは、ページ要素がスクロールされると背景画像が移動します |
| fixed | ページの残りの部分がスクロールされている間、背景画像は固定されます |
| inherit | 親要素から background-attachment プロパティの設定を継承する |
[例] background-attachment プロパティを使用して、画面上部の背景画像を固定します。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
body {
background-image: url('./bg-image.png');
background-repeat: repeat-x;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>background-position 属性</p>
<p>background-position 属性</p>
<p>background-position 属性</p>
<p>background-position 属性</p>
<p>background-position 属性</p>
<p>background-position 属性</p>
</body>
</html> 実行結果は次の図のとおりです。
6. 背景サイズ
background-size 属性は、背景画像のサイズを設定するために使用されます. この属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| xpos ypos | ピクセル (px) またはその他の CSS 単位を使用して、背景画像の高さと幅を設定します。xpos は幅を意味し、ypos は高さを意味します。最初の値のみが設定されている場合、2 番目の値はデフォルト値 auto (auto) に設定されます。 ) |
| x% y% | パーセンテージを使用して、要素の幅と高さに対する背景画像の割合を示します。x% は幅を意味し、y% は高さを意味します。最初の値のみが設定されている場合、2 番目の値はデフォルト値 auto (自動) |
| cover | 背景画像の縦横比を維持し、要素が配置されている領域を背景画像が完全に覆うことができるように、画像を十分に大きくしてください。表示された |
| contain | 背景画像の縦横比を維持し、要素が配置されている領域に背景画像が完全に表示されるように画像を十分に大きくします。背景画像は要素領域全体を完全にカバーしない場合があります。 |
[例] background-size 属性を使用して背景画像のサイズを設定し、背景画像を要素領域全体に横方向に広げます。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
body {
background-image: url('./bg-image.png');
background-repeat: repeat-x;
background-size: contain;
}
</style>
</head>
<body>
<p>background-size 属性</p>
</body>
</html> 実行結果は次の図のとおりです。
7. バックグラウンドオリジン
background-origin は、CSS3 で追加された新しいプロパティです。 background-position 属性を使用して背景画像の位置を設定する場合、デフォルトでは要素の左上隅の位置によって計算されます。また、background-origin 属性を使用して、背景画像に対する background-position 属性の位置を設定することもできます. background-origin 属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| padding-box | 要素のパディング領域を基準にして背景画像を配置します |
| border-box | 要素の境界領域を基準にして背景画像を配置します |
| content-box | 要素のコンテンツ領域を基準にして背景画像を配置します |
[例] background-origin 属性を使用して、背景画像が要素の境界領域に対して相対的に配置されるように設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: black;
background-image: url('./bg-image.png');
background-repeat: no-repeat;
background-origin: border-box;
background-position: 5px 5px;
margin: 20px; /*外側余白を20ピクセルに設定*/
padding: 20px; /*内側余白を20ピクセルに設定*/
border: 10px dotted red; /*赤い破線の太さが10ピクセルの外縁を設定*/
}
</style>
</head>
<body>
<p id="bg">background-origin 属性</p>
</body>
</html> 実行結果は次の図のとおりです。
8.背景クリップ
background-clip は CSS3 の新しい属性で、背景画像の表示領域を設定できます。 background-clip 属性のオプションの値は次のとおりです。
| 価値 | 例証する |
|---|---|
| boder-box | デフォルトでは、背景画像は要素の境界線上およびその周囲に表示されます |
| padding-box | 要素のパディング上およびパディング内に背景画像を表示します |
| content-box | 要素コンテンツ領域に背景画像を表示する |
【例】 background-clip 属性で背景画像を要素コンテンツ領域のみに表示するように設定する：
<!DOCTYPE html>
<html>
<head>
<title>CSSのバックグラウンド</title>
<style>
#bg {
background-image: url('./bg-image.png');
background-clip: content-box;
margin: 20px; /*外側の余白を 20px に設定*/
padding: 20px; /*内側の余白を 20px に設定*/
border: 10px dotted red; /*10px 幅の赤い点線枠を設定*/
}
</style>
</head>
<body>
<p id="bg">background-clipプロパティ</p>
</body>
</html> 実行結果は次の図のとおりです。
background は background 属性の省略形であり、要素に対して特定の background 属性を設定できるだけでなく、複数またはすべての background 属性を同時に設定することもできます。複数の背景プロパティを設定する場合、決まった順序はありませんが、次の順序をお勧めします。
background-color || background-image || background-position [/background-size]? || background-repeat || background-attachment || background-origin || background-clip
複数の背景プロパティを設定する場合、次の点に注意してください。
- 各属性をスペースで区切ります。
- background-position 属性と background-size 属性を同時に設定する場合は、2 つの属性の間にスラッシュ
/区切りを使用する必要があり、background-size 属性の前に background-position 属性の順序に従う必要があります。 - background-origin 属性と background-clip 属性を同時に設定する場合は、background-origin 属性が最初に来て background-clip 属性が後に来るという順序に従う必要があります。 background-origin プロパティと background-clip プロパティが同じ値の場合、設定できる値は 1 つだけです。
[例] バックグラウンドを介して複数のバックグラウンド プロパティを同時に設定する:
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
margin: 20px; /*外部マージンを20ピクセルに設定*/
padding: 20px; /*内部パディングを20ピクセルに設定*/
border: 10px dotted red; /*幅10ピクセルの赤い破線ボーダーを設定*/
}
</style>
</head>
<body>
<p id="bg">background属性</p>
</body>
</html> 実行結果は次の図のとおりです。
background 属性は、複数セットの属性値の設定もサポートします (上記の例#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-boxセットと見なすことができます)グループの属性値を区切るには、カンマ,を使用します。ただし、background-color 属性を複数設定することはできず、属性値の最後のセットでのみ設定できることに注意してください。
複数のプロパティ セットの背景画像間に重複がある場合、前に設定された背景画像が背後の背景画像を覆います。サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>CSSの背景</title>
<style>
body {
background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
url("./css.png") 50px 30px/120px 120px no-repeat content-box,
url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
}
</style>
</head>
<body>
</body>
</html> 実行結果は次の図のとおりです。
