巅峰霸主 > 设计开发 > 前端技术 >

css如何定位大图中的多个小图标

时间:2021-03-26 18:14:08  来源:巅峰霸主网  作者:shu010 点击:
摘要:我们经常会看到很多网站的图标是放在一张大图里面的,然后通过背景的方式来定位到小图标,这样可以节省多次请求加快速度,实现过程是怎么样的呢……

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 
<style>
 
div  {width:62px;height:67px;}//定义div的宽高
div{background-image:url(img/pic.jpg);}//定义背景图片
div.pic{background-position:0px 0px;}//图片的起始位置
div.pic:hover{background-position:-77px 0px ;}//图片偏移的位置
div.pic2{background-position:-154px 0px ;}
div.pic2:hover{background-position:-231px 0px ;}
div.pic3{background-position:-0px -79px ;}
div.pic3:hover{background-position:-77px -79px ;}
 
</style>
 
 </head>
 <body>
  <div>
 
  </div>
   <div>
 
  </div>
   <div>
 
  </div>
 </body>
</html>

(责任编辑:陆柏熺)
css
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部