雪碧图和图片映射

最新推荐文章于 2023-05-29 14:30:14 发布

dixiaotuo3231

最新推荐文章于 2023-05-29 14:30:14 发布

阅读量131

点赞数

原文链接：http://www.cnblogs.com/tllw/p/10374415.html

版权

使用雪碧图、字体图标、图片映射都可以提高网站性能

制作雪碧图标:

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>

结果：

转载于:https://www.cnblogs.com/tllw/p/10374415.html

dixiaotuo3231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
雪碧图和图片映射

使用雪碧图、字体图标、图片映射都可以提高网站性能制作雪碧图标:1、选中图标2、裁剪到合适大小3、整理的图标一般是垂直分布，或水平分布，对齐，留一定的间隙4、选中图标查看w h x y（x y 值一般是负值）5、存在工作文件夹下（psd形式，以便可以添加）6、存在工作文件下下（png形式，以便使用使用<!DOCTYPE html>&l...
复制链接

扫一扫