ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSで背景を追加する方法
CSSで背景を追加する方法
- 藏色散人オリジナル
- 2021-04-25 09:08:155709ブラウズ
CSS で背景を追加する方法: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成し、最後に「background-image」などの属性を使用して背景画像を設定します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS では、背景シリーズ属性 (background、background-color、background-image) を使用して HTML 要素の背景を定義できます。
css 背景関連の属性の追加
background-color 属性は、単色の背景を追加するために使用される要素の背景色を設定します。
background-image 属性は、要素の背景画像を設定します。
背景短縮プロパティは、1 つのステートメントですべての背景プロパティを設定し、単色の背景または背景画像を追加するために使用できます。
background-color プロパティ
background-color プロパティは、要素の単色を設定します。この色は、要素のコンテンツ、パディング、境界領域を塗りつぶし、要素の境界線の外側の境界まで広がります (ただし、余白は含まれません)。枠線に透明部分（点線枠など）がある場合、その透明部分に背景色が透けて見えます。
透明な値
ただし、ほとんどの場合、透明を使用する必要はありません。ただし、要素に背景色を持たせたくない場合や、ユーザーのブラウザの色の設定がデザインに影響を与えたくない場合は、依然として透明値の設定が必要です。
background-image プロパティ
background-image プロパティは、要素の背景画像を設定します。要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。
デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。
background-repeat プロパティの値に応じて、画像を無限に並べたり、軸 (x 軸または y 軸) に沿って並べたり、まったく並べたりしないことができます。
初期の背景画像 (元の画像) は、background-position 属性の値に従って配置されます。
background 属性
Background は、1 つのステートメントですべての背景属性を設定できる短縮属性です。
次の属性を設定できます。
background-color: 使用する背景色を指定します。
background-position: 背景画像の位置を指定します。
background-size: 背景画像のサイズを指定します。
background-repeat: 背景画像を繰り返す方法を指定します。
background-origin: 背景画像の配置領域を指定します。
background-clip: 背景の描画領域を指定します。
background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します。
background-image: 使用する背景画像を指定します。
注: 背景画像が利用できない場合でも、ページに良好な視覚効果が得られるように、利用可能な背景色を設定してください。
[推奨学習: css ビデオ チュートリアル ]
例:
<!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で背景を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。