网页精灵图怎样用呢？

我们浏览网页的时候，可以看到网页上面有很多小图标，这些小图标都是通过精灵图来实现的，那么网页精灵图怎样用呢？下面小编我就来分享分享。

操作方法

  • 01

    如图，网页的小图标一般都是放在同一张图片上面的，我们需要用到哪个图标就通过定位来获取到，这样就不用一个个图片的切割开来了。我们所需要知道的就是图标所在的位置就可以了。如图，小编我就使用PS打开图片。

  • 02

    然后我们在工具栏找到切片工具。

  • 03

    如图，用切片工具划出图标的区域，这里我就选取了一个红紫色的五角星图标。

  • 04

    之后，在划分好的图标区域上面单击鼠标右键，点击“编辑切片选项”。

  • 05

    这样我们就可以看到图标距离图片的边距是多少了，x，y表示的是图标左上角点的坐标，w表示图标的宽度，h表示的是高度。

  • 06

    接着我们开始编码，如图，书写一个div，并且给一个id名称。

  • 07

    然后我们定义div的宽高，宽高就是刚才图标的W和H ,之后，我们使用background把刚才那张图片用作背景。

  • 08

    保存之后，我们就可以看到，红紫色的五角星只显示了一部分，另外一部分被隐藏了。这时候我们需要把它往左边和上边拉一拉。

  • 09

    如图，使用background-position定位，后面的两个参数，正数表示的是往右移动和往下移动，而我们使用的是负数，则表示往左移动和往上移动。

  • 10

    这样，我们就通过定位的方式把想要的图标定位，而其他不想要的图标则会被隐藏起来，非常方便哦。

赞 (0)

相关推荐

  • Mac电脑如何在Safari浏览器中截取网页长图

    Mac电脑如何在Safari浏览器中截取网页长图

    现在有越来越多人在使用Mac电脑,有些新用户不知道如何在Safari浏览器中截取网页长图,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开Safari浏览器,接着根据下图所示 ...

  • iPhone手机如何截取网页长图

    iPhone手机如何截取网页长图

    现在有很多人在使用iPhone手机,有些新用户不知道如何截取网页长图,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开手机中的Safari浏览器,根据下图箭头所指,进入目标网页 ...

  • 在Chrome浏览器中批量下载网页美图

    首先，在Chrome网上应用店搜索并安装“小乐图客”扩展程序。 安装小乐图客扩展程序 安装好之后，就可以在Chrome浏览器右上角的扩展图标处看到一个绿色LOGO，这就是小乐图客的程序。右键点击这个小 ...

  • 如何截取网页长图

    操作方法 01 在浏览器上安装一个截图插件.ps:我用的是火狐浏览器.在火狐浏览器上找到如图中蓝色框中位置(在浏览器右上角位置),然后选中截取整个网页即可. 02 然后选择如图中的红色标记中的位置,选 ...

  • 网页背景图固定不动，不跟随滚动条滚动

    操作方法 01 我们在做网页的时候,当背景是一张完整的图片,不动让其跟随滚动条滚动,怎么办?下面详细讲解一下. CSS代码示例-背景颜色属性(background-color)背景颜色 backgro ...

  • 美图秀秀网页版 "闪"出夏日好心情

    炎炎夏日，高温来袭。想要一扫工作之余的疲惫心情？不妨先从美化心水照片开始吧！“美图秀秀网页版”新增的“闪图”功能，让你的靓照轻松闪起来，夏 日的清凉好心情也随之而至啦~制作完成后如果想要展示给好友，直 ...

  • 网页配图之道：首图的设计技巧（一）

    小编:今天为大家带来一些网页首图设计技巧,感谢作者@飞屋睿的分享以及详细的讲解.这来自实际的八条设计技巧实在是巧妙,让我们可以更好的做出适配网站的首图.如果你苦于没有灵感,不妨来读一读这篇文章,定会让 ...

  • 25款最佳网页设计神器分享

    对于网页设计师而言，Photoshop是必不可少的工具。而事实上，Photoshop除了其原有的基础功能之外，我们还可以给PS配置许多功能强大的PS插件，这些PS插件可以让平时复杂繁琐的操作变得更加简 ...

  • 怎么把lnternet网页数据导入excel?

    怎么把lnternet网页数据导入excel?