雪碧圖和圖片映射
阿新 • • 發佈：2019-02-14
tle pla 作文件 ima com http 性能 分享 charset
使用雪碧圖、字體圖標、圖片映射都可以提高網站性能
制作雪碧圖標:
1、選中圖標
2、裁剪到合適大小
3、整理的圖標一般是垂直分布，或水平分布，對齊，留一定的間隙
4、選中圖標查看w h x y（x y 值一般是負值）
5、存在工作文件夾下（psd形式，以便可以添加）
6、存在工作文件下下（png形式，以便使用
使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test img-map</title> <style> /*sprite array*/ .icon { display: inline-block; background: url(./assets/img/icos1.png) no-repeat; } /*sprite*/ .icon_bag { width: 40px; height: 40px; background-position: 0px 0px; } /*self*/ .bag { border-radius: 30%; } /*sprite*/ .icon_date { width: 40px; height: 40px; background-position: -110px 0px; } /*self*/ .date { margin-left: 10px; border-radius: 30%; } </style> </head> <body> <!-- 雪碧圖 --> <i class="icon icon_bag bag"></i> <i class="icon icon_date date"></i> <br/> <!-- 圖片映射--> <img src="./assets/img/icos1.png" usemap="#myMap" width="315" height="40" alt="這是一個導航圖片"> <map name="myMap"> <!-- shape 可以是圓circle、矩形rect、多邊形poly，圓coords為圓心和半徑、矩形coords為左上點和右下點、多邊形coords為轉折點 --> <area shape="rect" coords="0, 0, 40, 40" href="http://www.baidu.com/" title="bag"> <area shape="rect" coords="55, 0, 95, 40" href="http://www.google.com/" title="date"> <area shape="rect" coords="110, 0, 150, 40" href="http://www.baidu.com/" title="bag"> <area shape="rect" coords="165, 0, 205, 40" href="http://www.google.com/" title="date"> <area shape="rect" coords="220, 0, 260, 40" href="http://www.baidu.com/" title="bag"> <area shape="rect" coords="275, 0, 315, 40" href="http://www.google.com/" title="date"> </map> </body> </html>
結果：
雪碧圖和圖片映射