图标截取——背景偏移量技术

图标截取——背景偏移量技术

美工将若干个图标合在一起做成一张图片，怎么取出里面的每一个小图标来用呢？

比如icon.gif包含一些图标。

1、效果图

2、实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示从大图中截取小图标</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"><link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css"><script src="scripts/jquery-3.1.1.min.js"></script><script src="bootstrap/js/bootstrap.js"></script><style type="text/css">.menu {width: 100%;height: 50px;float: left;}.menu li {list-style: none;float: left;}.pic1 {width: 28px;height: 26px;margin-top: -5px;background: url(images/icon.gif) no-repeat 0px 2px;}.pic2 {width: 28px;height: 26px;margin-top: -5px;background: url(images/icon.gif) no-repeat -28px 2px;}.pic3 {width: 28px;height: 26px;margin-top: -5px;background: url(images/icon.gif) no-repeat -84px 2px;}.pic4 {width: 28px;height: 26px;margin-top: -5px;background: url(images/icon.gif) no-repeat -112px 2px;}.btn {padding: 0px 5px;text-align: center;width: 50px;height: 26px;background: url(images/icon.gif) no-repeat 0px -28px;}</style>
</head>
<body>
<div class="container"><div class="row"><div class="well col-md-6"><div class="menu"><ul><li class="pic1"></li><li><a href="#">购物车</a></li><li class="pic2"></li><li><a href="#">帮助中心</a></li><li class="pic3"></li><li><a href="#">加入收藏</a></li><li class="pic4"></li><li><a href="#">设为首页</a>;</li><li class="btn"><a href="#">登录</a></li><li class="btn"><a href="#">注册</a></li></ul></div></div></div>
</div>
</body>
</html>

解释说明：

通过设置width和height属性确定要截取图片的大小，background属性值得最后两个参数用于定位与大图片的位置，第一个参数是设置图片横向移动，负数表明往左移动，正数表明往右移；第二个参数是设置图片纵向移动，正数表明往下移动，负数表明往上移动。

图标截取——背景偏移量技术相关推荐

css用一张大图片来设置背景的技术真相
之前就知道了用一张图片来设置页面内的所有背景的技术.原理很简单,利用background-potision精确地定位到图片的位置.好处是减少页面的http请求数. 老实说,我并不觉得这个技术有多值得 ...
CSS3 矢量图标及背景精灵
矢量图标浅解矢量图:根据几何特性来绘制图形.它的特点是放大后图像不会是真,和分辨率无关位图:是由称作像素(图片像素)的单个点组成的,放大后,会变成马赛克矢量图标引用矢量图标和字体的用法一样 f ...
厦门之旅第一篇Gradle多渠道打包(动态设定App名称，应用图标，背景图片，状态栏颜色)
我不是诗人,写不出厦门的美:我不是歌手,唱不出厦门的情:我不是画家,画不出厦门的景. 我只是一名程序员,我只能用我的眼,我的心去看去感受,那久违的海风吹拂着脸颊,好似内心那一份烦躁与沉重也随着海风飘向 ...
js 背景遮罩_Photoshop文章中的5种出色的背景遮罩技术
js 背景遮罩技术3:提取技术 (Technique 3: The Extract Technique) As with the Background Eraser technique, it's ...
【debug】写应用程序时遇到的桌面图标、运行图标、背景图片问题
摘要记一次写程序时遇到的跟图片有关的编程.用python写程序时,跟图片有关的地方大致有以下三个: 桌面图标运行图标背景图片所需模块说明 from io import BytesIO from ...
Qt中如何给按钮加图标（背景图片）
Qt中如何给按钮加图标(背景图片) 1. Qt Designer中拖入一Tool Button 2. 选择图标的图片放入工程目录下,如放在Resources内 3. 双击工程的Resource Fil ...
×××背景知识技术介绍
×××背景知识技术介绍 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" / ...
C#语言操作Win7系统任务栏（TaskBar）中程序图标的背景进度条
一.问题描述在使用火狐浏览器(47.0.1)下载文件时,我注意到我的Win7系统任务栏火狐程序图标的背景部分会变成一个进度条,实时展示下载进度. 于是我想了下怎么用C#语言实现这个功能,也上网查了些 ...
个性U盘制作（添加图标、背景）
个性U盘制作(添加图标.背景) 添加图标 1.首先选择一个你喜欢的图标,记住,图标的扩展名是.ico. 2.将这个图标文件拷到U盘,并在U盘中新建一个文本文件. 3.在文本文件中写入一下内容:(注意, ...

图标截取——背景偏移量技术

图标截取——背景偏移量技术相关推荐

最新文章

热门文章