CSSで背景を設定する方法-CSSチュートリアル-php.cn

CSSで背景を設定する方法

coldplay.xixi

リリース： 2023-01-05 16:08:57

オリジナル

20454 人が閲覧しました

CSS で背景を設定する方法: 1. [background-color] 属性を使用して要素の単色を設定します; 2. [background-image] 属性を使用して要素の背景画像を設定します要素; 3. 背景属性は、宣言内のすべての背景プロパティを設定する中で使用できます。

CSSで背景を設定する方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS で背景を設定する方法:

1. 背景色属性

背景色属性セット要素 A の単色の値。この色は、要素のコンテンツ、パディング、境界領域を塗りつぶし、要素の境界線の外側の境界まで広がります (ただし、余白は含まれません)。枠線に透明部分（点線枠など）がある場合、その透明部分に背景色が透けて見えます。

透明な値

ただし、ほとんどの場合、透明を使用する必要はありません。ただし、要素に背景色を持たせたくない場合や、ユーザーのブラウザの色の設定がデザインに影響を与えたくない場合は、依然として透明値の設定が必要です。

2. 背景画像属性

背景画像属性は、要素の背景画像を設定します。要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。

デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。

background-repeat プロパティの値に応じて、画像を無限に並べたり、軸 (x 軸または y 軸) に沿って並べたり、まったく並べたりしないことができます。

初期の背景画像 (元の画像) は、background-position 属性の値に従って配置されます。

3. 背景属性

Background は、1 つのステートメントですべての背景属性を設定できる短縮属性です。

次の属性を設定できます。

background-color: 使用する背景色を指定します。
background-position: 背景画像の位置を指定します。
background-size: 背景画像のサイズを指定します。
background-repeat: 背景画像を繰り返す方法を指定します。
background-origin: 背景画像の配置領域を指定します。
background-clip: 背景の描画領域を指定します。
background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します。
background-image: 使用する背景画像を指定します。

注: 背景画像が利用できない場合でも、ページに良好な視覚効果が得られるように、利用可能な背景色を設定してください。

#例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 400px;
height: 200px;
border: 1px solid red;
}
.demo1{
background-color: paleturquoise;
}
.demo2{
background-image: url(1.jpg);
background-size: 400px;
}
.demo3{
background:paleturquoise url(1.jpg) no-repeat;
background-size: 300px;
}
</style>
</head>
<body>
<div class="demo1">纯色背景</div>
<div class="demo2">图片背景</div>
<div class="demo3">纯色+图片背景</div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景を設定する方法