ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで背景を設定する方法
CSSで背景を設定する方法
- coldplay.xixiオリジナル
- 2021-04-15 16:29:2520464ブラウズ
CSS で背景を設定する方法: 1. [background-color] 属性を使用して要素の単色を設定します; 2. [background-image] 属性を使用して要素の背景画像を設定します要素; 3. 背景属性は、宣言内のすべての背景プロパティを設定する中で使用できます。
このチュートリアルの動作環境: 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 チュートリアル #
以上がCSSで背景を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。