ホームページ > 記事 > ウェブフロントエンド > CSSに画像を挿入する方法
CSSに画像を挿入する方法
- 藏色散人オリジナル
- 2021-04-25 09:36:1099718ブラウズ
Css を使用して画像を挿入する方法: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成し、最後に「background-image: url(1.jpg);」スタイルを設定して画像を挿入します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS では、background-image 属性を使用して画像を追加できます。背景画像プロパティは、要素の背景画像を設定します。初期の背景画像 (元の画像) は、background-position プロパティの値に従って配置されます。
要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。
ヒント: 背景画像が利用できない場合でも、ページに良好な視覚効果が得られるように、利用可能な背景色を設定してください。
詳細
background-image 属性は、要素の背景に画像を設定します。 background-repeat プロパティの値に応じて、画像を無限に並べたり、ある軸 (x 軸または y 軸) に沿って並べたり、まったく並べたりしないことができます。
初期の背景画像 (元の画像) は、background-position 属性の値に従って配置されます。
属性値:
url('URL') 画像を指すパス。
none デフォルト値。背景画像は表示されません。
[推奨学習: css ビデオ チュートリアル ]
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 400px;
height: 300px;
border: 1px solid red;
}
.img1{
background-image: url(1.jpg);
background-size: 200px;
}
</style>
</head>
<body>
<div class="img1"></div>
</body>
</html>レンダリング:
以上がCSSに画像を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。