经验版块

相关版块

css使用background-position定位小图标

教育科学 发布于:2018-08-09 18:03   浏览:46次 说说您的看法

现在前端开发越来越多的把小图标放在一张大图上,这样的好处是可以减少容量,下面通过一个案例,给大家演示下如何准备定位其中的小图标,这个案例是从一张有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轴


说说您对 “ css使用background-position定位小图标 ” 的看法↓↓↓

关于 “ css使用background-position定位小图标 ” 的经验资讯↓↓↓

如何学好物理(3)

如何学好物理(3)

 次小编讲了两课时的物理教法,明天小编持续吧!东西/本料 条记本笔办法/步调 第 1 步正在教室上,要擅长捕获对本人有效的疑息,那些疑息既有常识性的,也有办法

更新时间:2018-08-14
利用手机百度翻译app学习高考英语核心词汇

利用手机百度翻译app学习高考英语核心词汇

 机百度翻译app供给了很丰硕的辞汇供我们进修,关于下中的教死去道,能够操纵那个硬件去进修下考英语中心辞汇。详细步调以下:东西/本料 智妙手机、百度翻译app

更新时间:2018-08-13
如何在电脑上查看苹果手机TIM聊天内容

如何在电脑上查看苹果手机TIM聊天内容

 样对苹果脚机tim谈天记载停止规复呢?偶然我们能够会操纵,删除脚机微疑、qq或TIM硬件中的谈天内容,因为谈天硬件中的内容被删除后,只是做了一个删除标识表记标帜,其相

更新时间:2018-08-12
如何快速运用手机导航?

如何快速运用手机导航?

 在出有智妙手机的年月,各人出门正在中,没有熟习路的话只能靠问大概是一张十分简单的舆图停止觅路。跟着挪动互联网的提高,和都会的范围愈来愈年夜,门路愈来愈庞大。脚机导航

更新时间:2018-08-12
成人高考机电一体化技术(专科)

成人高考机电一体化技术(专科)

 机一体化手艺东西/本料 所需材料:专科:两寸蓝底电子版照片、身份证正背面、中专或下中结业证办法/步调 第 1 步少秋理工年夜教:专科:管帐、工商企业办理、经

更新时间:2018-08-12
哪些小游戏,可以培养幼儿的观察力?

哪些小游戏,可以培养幼儿的观察力?

 雅察力的培育,关于幼女阶段的女童去道是很枢纽的。因而,操纵一些小游戏去培育孩子不雅察力,删进年夜人取小孩子的感情,是主要的一件事。东西/本料 育女常识办法/步调

更新时间:2018-08-12
如何培养自信

如何培养自信

 进年夜教的同窗们,面临各类百般的人,能够情不自禁的停止比力,有比力便有差异。因而便发生了没有自大,那怎样培育自大呢?东西/本料 年夜教糊口自大收集办法/步调 第

更新时间:2018-08-12
平稳度过高三需要注意什么?

平稳度过高三需要注意什么?

 进下三大概复读下三的教死们,耳边常常听到一句话:便辛劳那一年了,考上年夜教便好了。先道个假话,考上好年夜教很辛劳,年夜教四年便是下四糊口。不外,写给我们读下三的您,

更新时间:2018-08-12
怎样合适选择学历提升的方式

怎样合适选择学历提升的方式

 历,是反应一小我私家受教诲水平的主要目标,便是所谓的文凭,但提拔教历的经常使用路子中,齐日造年夜教是最受人喜爱的方法,是遍及接纳的方法,可是教历提拔也有其他的方法,不消

更新时间:2018-08-12
如何用画图软件画QQ图标企鹅?

如何用画图软件画QQ图标企鹅?

 Q腾讯是1999年2月开辟的一款立即通信收集东西。图标与自于小企鹅图片。QQ用英语去道便是cute,果为cute取Q是谐音,以是小企鹅配QQ,也是一个很好的名

更新时间:2018-08-11
zp

热门经验

最新经验


经验吧 @ www.jingyan8.com