img 及 HTML 技术
图片格式的分类
位图图片: bmp、jpg、gif、png；
矢量图片: 以 svg 格式为代表，可缩放矢量图形(Scalable Vector Graphics), svg 是一种使用 XML 格式定义的图像；
传统方式的图标
图标采用图片格式，有 bmp、jpg、gif、png 等文件格式；
缺点：大小改变后，可能会出现锯齿效果，影响美观；
字体图标
图标采用字体的格式；
可以使用 color、font-size 等改变图标颜色，大小等的一些样式属性；
一张图片实现 多个跳转
-
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）；
-
<area> 总是嵌套在 <map> 标签中；
-
<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系；
-
所有主流浏览器都支持 <area> 标签；
-
一款在线工具 Image-Maps ，只需在 Image-Maps 上注册一个账号，就能够通过可视化工具对图片进行剪裁，获取裁剪的图片的坐标：
<img id="Image-Maps-Com-image-maps-2023-06-02-004229" src="meimei.jpg" border="0" width="1280" height="768" orgWidth="1280" orgHeight="768" class="lazy-load" usemap="#image-maps-2023-06-02-004229" alt="" /> <map name="image-maps-2023-06-02-004229" id="ImageMapsCom-image-maps-2023-06-02-004229"> <area id="baidu" alt="百度" title="百度" href="http://www.baidu.com/" shape="rect" coords="0,0,602,768" style="outline:none;" target="_self" /> <area id="element-plus.gitee.io" alt="element-plus.gitee.io" title="element-plus.gitee.io" href="https://element-plus.gitee.io" shape="rect" coords="653,0,1280,768" style="outline:none;" target="_self" /> <area shape="rect" coords="1278,766,1280,768" alt="Image Map" style="outline:none;" title="Image Map" href="https://www.image-maps.com/" /> </map>![]()
background-icon
-
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>background-icon</title> <style> /* 背景八大属性 css: 背景颜色 路径 平铺方式 坐标点 滚动还是固定 css3: 背景尺寸 背景显示原点 背景裁剪(text) */ * { margin: 0; padding: 0; } .main { width: 1080px; margin: 0 auto; } .item { width: 33.33%; float: left; } .icon { display: inline-block; width: 50px; height: 50px; /* background-image: url(images/icon-wechat.png); */ background-repeat: no-repeat; background-size: contain; } .txt { display: inline-block; text-align: left; } .item:nth-child(1) { text-align: left; } .item:nth-child(2) { text-align: center; } .item:nth-child(3) { text-align: right; } </style> </head> <body> <div class="main"> <div class="item"> <div class="icon" style="background-image:url(images/icon-wechat.png);"></div> <div class="txt"> <h2>微信小程序</h2> <p>微信扫一扫，直接用车</p> </div> </div> <div class="item"> <div class="icon" style="background-image:url(images/icon-credit.png);"></div> <div class="txt"> <h2>微信小程序</h2> <p>微信扫一扫，直接用车</p> </div> </div> <div class="item"> <div class="icon" style="background-image:url(images/icon-rp.png);"></div> <div class="txt"> <h2>微信小程序</h2> <p>微信扫一扫，直接用车</p> </div> </div> </div> </body> </html> -
效果展示
![]( "background-icon")
icon-Sprites
-
该技术的全称是: CSS Sprite, 又称为 CSS 雪碧图(精灵图)，是网页中图片的一种处理方式，即将网页中所应用的比较小的图片合并为一个大的图片；
- 优点: 减少 http 请求次数，使页面的加载速度更快，提高了网页的性能；
- 缺点: 先设置标签背景图片，再通过精灵图中小图标的宽高和位置，设置对应的 div 宽高和背景定位坐标；
- 生成工具: CSS sprites Generator，直接生成 http://css.spritegen.com/；
- 雪碧图的坐标点：
![]( "icon-Sprites")
-
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>icon-Sprites</title> <style> /* 背景background-position:0 0 （x轴 y轴） */ .hot { width: 48px; height: 48px; background: url(images/sprites-baidu.png) no-repeat; background-position: 0 -102px; } .search { width: 48px; height: 48px; background: url(images/sprites-baidu.png) no-repeat; background-position: 0 -204px; } </style> </head> <body> <div class="hot"></div> <div class="search"></div> </body> </html> -
效果展示：
![]( "icon-Sprites")
字体图标
-
目前很多页面中的图标都是使用字体图标 @font-face 完成的
-
优势
- 矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源;
- 轻量性：一个图标字体比一系列的图像（特别是在 Retina 屏中使用双倍图像）要小，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像，可以减少 HTTP 请求，还可以配合 HTML5 离线存储做性能优化;
- 可扩展性：图标字体可以用过 font-size 属性设置其任何大小，这使您能够随时输出不同大小的图标，然而，使用位图，必须得为每个不同大小的图像输出一个不同文件；
- 灵活性：文字效果可以很容易地应用到图标上，包括颜色，阴影和翻转等效果，还可以在任何背景下显示；
- 兼容性：网页字体支持所有现代浏览器，包括 IE 低版；[ http://caniuse.com/#feat=fontface ]
-
弊端
- 图标字体只能被渲染成单色或者 CSS3 的渐变色，由于此限制使得它不能广泛使用；
- 使用版权上有限制，有好多字体是收费的，当然也有很多免费开源的精美字体图标供下载使用；
- 创作自己的字体图标很费时间，重构人员后期维护的成本偏高；
-
常用的字体图标
面试题
img 属于行元素还是行内块元素？ img 默认的间距该如何去掉？
第一种：设置
display: block;第二种：设置
vertical-align: 不为默认值即可;第三种：设置父元素
font-size: 0px；
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ 层叠上下文
上一篇
评论
