普通图片
<img src="url地址" alt="图片显示异常" title="图片显示正常" height="图像高度" width="图像宽度"/>
图像映射
<img src="url" usemap="map_name">
<map id="map_id" name="map_name">
<!-- 圆形：圆心坐标为（x1,y1）、半径（r） -->
<area shape="circle" coords="x,y,r" href="#" alt="remind">
<!-- 矩形 rectangle ：左上角顶点坐标为（x1,y1）、右下角顶点坐标为（x2,y2） -->
<area shape="rect" coords="x1,y1,x2,y2" href="#" alt="remind">
<!-- 多边形 polygon ：各顶点坐标依次为（x1,y1）,(x2,y2),(x3,y3)...... -->
<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="#" alt="remind">
</map>
<img>中的usemap属性可引用<map>中的id或name属性，所以应同时向<map>添加id和name属性。
背景属性
-
background-color 背景颜色
-
background-image 背景图片，默认repeat平铺
-
background-repeat 背景图片平铺 no-repeat repeat repeat-x repeat-y
-
background-attachment 背景图片固定，相对于浏览器窗口左上角固定，跳出三界，不受盒子约束 scroll fixed
-
background-position 背景图片定位 eg.
backgound-position:center center;水平和竖直都居中显示 -
background: color image repeat attachment position; 复合写法，顺序可以换，每个属性只能取一个值，放在后面的能覆盖前面的指明
-
background-size 背景图片的大小（单独使用）
- background-size:contain; //缩小图片来适应元素的尺寸（保证完整显示）
- background-size:cover; //扩展图片来适应元素的尺寸（不保证完整显示）
- background-size:100px 100px | 50% 100%; //调整图片到指定大小：水平 垂直
.banner{
width: 100%;
min-height: 400px;
background-image: url(./images/banner_bg_pic1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
background-attachment: scroll;
}
See Also - 绝对路径
文件在硬盘上真正存在的路径。例如，image.jpg 这个图片是存放在硬盘的E:\book\chapter 目录下，那么这个image.jpg图片的绝对路径就是E:\book\chapter。注意，绝对路径在实际的开发过程中很少去使用，如果使用E:\book\chapter来指定图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用\或/字符作为目录的分隔字符。
实例 - 视觉差滚动切换背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
background-color: rgb(250, 250, 250);
}
.bg1,.bg2,.bg3{
width: 100%;
height: 1000px;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.bg1{
background-image: url(https://thumbnail0.baidupcs.com/thumbnail/666ddf0afqecc5f27abf3d0fd9f29048?fid=3072725780-250528-1036374587292105&time=1662109200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-1Cv2aV%2F4gLT29uAaSA1deynmf7I%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=9134928928209413827&dp-callid=0&file_type=0&size=c710_u400&quality=100&vuk=-&ft=video);
}
.bg2{
background-image: url(https://thumbnail0.baidupcs.com/thumbnail/dd3cee1f0g7cb56de50492f09d13c58e?fid=3072725780-250528-387080945495865&time=1662109200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-WmNyXcPqSBam%2BcknXd6CstaeYjY%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=9134978451363706268&dp-callid=0&file_type=0&size=c710_u400&quality=100&vuk=-&ft=video);
}
.bg3{
background-image: url(https://thumbnail0.baidupcs.com/thumbnail/118d9bd77g786871b916a5d32be33912?fid=3072725780-250528-52609479693749&time=1662109200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-f4LkrhOVtPz4neCB0qcbXwVnkbs%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=9135014607428038525&dp-callid=0&file_type=0&size=c710_u400&quality=100&vuk=-&ft=video);
}
.bg1 span,.bg2 span,.bg3 span{
font: normal bolder 100px/900px 隶书;
letter-spacing: 50px;
background: none; /* 字体背景透明 */
margin: 0 300px;
}
</style>
</head>
<body>
<div class="bg1">
<span>探索</span><span>世界</span>
</div>
<div class="bg2">
<span>链接</span><span>未来</span>
</div>
<div class="bg3">
<span>无限</span><span>可能</span>
</div>
</body>
</html>
