css使用background-position定位小图标

首页 > 教育科学 > 未知
来源:未知 发布日期:2018-08-09 18:03 浏览:171次

现在前端开发越来越多的把小图标放在一张大图上,这样的好处是可以减少容量,下面通过一个案例,给大家演示下如何准备定位其中的小图标,这个案例是从一张有26个字母中抠出Today这个单词,请看效果图:

css使用background-position定位小图标

工具/原料

  
前端工具HBuilder
浏览器

方法/步骤

  
第 1 步

首先准备图片素材,请下载使用,如下:

css使用background-position定位小图标


第 2 步

因为是5个字母,所以只需要5个span元素即可,代码如下:

<body>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</body>


第 3 步

给每个span加上相同的背景图片,就是素材图片,代码如下:

span {

 background: url(../img/abcd.jpg) no-repeat;

 float: left;

}

然后给第一个span定位出小图标,我们可以用span:first-child伪类来定位第一个元素,代码如下:

span:first-child {

  width: 108px;

  height: 111px;

  background-position: -367px -416px;

}

效果图如下:

css使用background-position定位小图标


第 4 步

第一个span定位出来了,下面4个span原理相同,代码如下:

span:nth-child(2) {

  width: 110px;

  height: 113px;

  background-position: -369px -275px;

}

span:nth-child(3) {

  width: 97px;

  height: 108px;

  background-position: -363px -7px;

}

span:nth-child(4) {

  width: 110px;

  height: 110px;

  background-position: 0px -9px;

}

span:nth-child(5) {

  width: 110px;

  height: 110px;

  background-position: -366px -556px;

}

效果图如下:

css使用background-position定位小图标


第 5 步

下面给所有小图标加上鼠标经过效果,首页鼠标状态变成小手,然后添加透明度,这样就有了动态效果,代码如下:

span:hover{

  cursor: pointer;

  opacity: 0.2;

}

效果图如下:

css使用background-position定位小图标


第 6 步

最后展示全部源码,可以直接使用:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style  type="text/css">

span {

  background: url(../img/abcd.jpg) no-repeat;

  float: left;

}

span:first-child {

  width: 108px;

  height: 111px;

  background-position: -367px -416px;

}

span:nth-child(2) {

  width: 110px;

  height: 113px;

  background-position: -369px -275px;

}

span:nth-child(3) {

  width: 97px;

  height: 108px;

  background-position: -363px -7px;

}

span:nth-child(4) {

  width: 110px;

  height: 110px;

  background-position: 0px -9px;

}

span:nth-child(5) {

  width: 110px;

  height: 110px;

  background-position: -366px -556px;

}

span:hover{

  cursor: pointer;

  opacity: 0.2;

}

</style>

  </head>

    <body>

          <span></span>

          <span></span>

          <span></span>

          <span></span>

           <span></span>

    </body>

</html>

  

注意事项

  
background-position抠图一定要给元素加上宽、高
background-position有2个属性一个代表X轴,一个代表Y轴
  阅读原文
支持0次 | 反对0次  
  用户评论区,文明评论,做文明人!

通行证: *邮箱+888(如:123@qq.com888)