插入图片 :
<img>
标签可以插入一张图片 ;width
设置图片内容宽度 ;height
设置图片内容高度 ;margin-left
设置图片的 左外边距 ;margin-top
设置图片的 上外边距 ;代码示例 :
img {
/* 设置图片大小 */
width: 200px;
height: 200px;
/* 通过修改 盒子模型 外边距 修改图片显示位置 */
margin-left: 50px;
margin-top: 50px;
}
在该示例中 , 使用
<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>
展示效果 :
背景图片 :
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;
}
在该示例中 , 使用
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>
展示效果 :