Article directory
1. Insert a picture
1 Introduction
Insert image:
- How to insert pictures: In HTML, use
<img>the tag to insert a picture; - Applicable scenarios for inserting pictures: displaying content, buttons, generally displaying pictures by inserting pictures,
- Set the size of the inserted picture: set the size of the picture by setting the content size of the box model;
widthSet image content width;heightSet the image content height;
- Set the display position of the inserted picture: set the position of the picture by setting the left and top margins of the box model;
margin-leftSet the left margin of the image;margin-topSet the top margin of the picture;
Code example:
img {
/* 设置图片大小 */
width: 200px;
height: 200px;
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
}
2. Code example
In this example, use
<img src="images/image.jpg">
label, insert image,
By setting the width and height of <img>the label
width: 200px;
height: 200px;
to set the image size,
Set <img>the label
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
to set the position of the image;
Code example:
<!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>
Display of results :
2. Background image
1 Introduction
Background picture :
- How to set the background image: In CSS, set
backgroundthe attribute , and set the background image;
/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
- Applicable scenarios for background images: displaying small icons or super-large backgrounds, generally using background images to display images;
- Set the size of the background image: set the size of the image by setting the size of the background image;
- Set the display position of the background image:
background-positionModify the display position of the image by modifying the background position ;
Code example:
div {
/* 设置盒子大小 */
width: 400px;
height: 400px;
/* 设置图片背景 */
background: pink url(images/image.jpg) no-repeat;
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;
}
2. Code example
In this example, use
background: pink url(images/image.jpg) no-repeat;
CSS style, set background image,
background-positionModify the image display position by modifying the background position
/* 通过修改 背景位置 background-position 修改图片显示位置 */
background-position: 50px 50px;
to set the position of the image;
Code example:
<!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>
Display of results :
