1. 写真を挿入する
1 はじめに
画像を挿入:
- 画像の挿入方法: HTML では、
<img>タグを画像を挿入します。 - 画像の挿入に適用されるシナリオ:コンテンツの表示、ボタン、一般的な画像の挿入による画像の表示、
- 挿入された画像のサイズを設定します。ボックス モデルのコンテンツ サイズを設定して、画像のサイズを設定します。
width画像コンテンツの幅を設定します。height画像コンテンツの高さを設定します。
- 挿入された画像の表示位置を設定します。ボックス モデルの左マージンと上マージンを設定して、画像の位置を設定します。
margin-left画像の左マージンを設定します。margin-top画像の上余白を設定します。
コード例:
img {
/* 设置图片大小 */
width: 200px;
height: 200px;
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
}
2.コード例
この例では、
<img src="images/image.jpg">
ラベル、画像挿入、
<img>ラベルの幅と高さを設定する
width: 200px;
height: 200px;
画像サイズを設定するには、
によって<img>ラベル
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
画像の位置を設定します。
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>插入图片</title>
<style type="text/css">
img {
/* 设置图片大小 */
width: 200px;
height: 200px;
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pic">
<img src="images/image.jpg">
</div>
</body>
</html>
結果の表示:
2.背景画像
1 はじめに
背景画像:
- 背景画像の設定方法: CSS で box の
background属性、背景画像を設定します。
/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
- 背景画像に適用されるシナリオ:小さいアイコンまたは非常に大きな背景を表示し、通常は背景画像を使用して画像を表示します。
- 背景画像のサイズを設定します。背景画像のサイズを設定して、画像のサイズを設定します。
- 背景画像の表示位置を設定します。背景位置を変更
background-positionして画像の表示位置を変更します。
コード例:
div {
/* 设置盒子大小 */
width: 400px;
height: 400px;
/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;
}
2.コード例
この例では、
background: pink url(images/image.jpg) no-repeat;
CSS スタイル、背景画像の設定、
背景位置を変更background-positionして画像表示位置を変更する
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;
画像の位置を設定します。
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>背景图片</title>
<style type="text/css">
div {
/* 设置盒子大小 */
width: 400px;
height: 400px;
/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
結果の表示:
