以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他。因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊。原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标。像下面这样的:
。。。。
<dl>
<dt><span class='icon png_trans'></span>您还没上传头像呢?</dt>
<dd>上传头像有利于其他用户更好的了解您,<a href="file">点击这里上传</a></dd>
</dl>
。。。
我原本以为雪碧图只能这样用,也就是专门用一个废标签来放图标,而不能是把图标放在语义标签里作为背景。今天我自己切雪碧图,我按照他们在效果图里面原本什么位置多大间距就保持原样,然后把它们选出来,放在一个新建的文件里面,像这样:效果图原样是
或是这样效果原样是
这样就不需要那个废标签啦,下面是第一个图和第二个图的代码
<div class="changeStatus">
<span class='error'>提示信息:删除失败!</span>
<span class='success'>提示信息:删除成功!</span>
<span class='worning'>提示信息:警告!</span>
</div>
样式代码
...
background:url(../../images/manage/tip.png) 10px 6px no-repeat #FFDFDF;
...
<div class="btnlist">
<input type="checkbox" />全选
<a href="#"><span class='del'>删 除</span></a><a href="#" ><span class='reverse'>新 增</span></a><a href="#"><span class='change'>修 改</span></a>
</div>
样式代码
.btnlist span.del{
background:url(../../images/manage/optlist.png) -99px -4px no-repeat;
}
.btnlist span.reverse{
background:url(../../images/manage/optlist.png) -3px -4px no-repeat;
}
.btnlist span.change{
background:url(../../images/manage/optlist.png) -51px -4px no-repeat;
}
这样而且很好给background-position做定位,基本上几秒一个图的事情,真是方便快捷啊,O(∩_∩)O哈哈~
分享到:
相关推荐
css雪碧图制作工具,用于页面优化,web优化必备的工具
雪碧图css工具,一款css样式的神器 你值得拥有。。。。。。。。。。。。。。。。。。。。。。。
css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite
CssSprite是一款很好用的小图合并工具,能自动生成CSS代码,导入小图就可以直接用了~
当图片数量较多,而且搭配合理的情况下,可以有效地提升网页速度;另外,借助 CSS sprite 的特性可以进行图片提前加载处理。
可减轻广大Web程序员或网站网页设计爱好者制作雪碧图时的苦恼、愉快地享用CSS雪碧图网页开发技术。 在网页中使用雪碧图技术,有如下优点: 1.减少加载网页图片时对服务器的请求次数; 2.提高网页的加载速度...
NULL 博文链接:https://submaze.iteye.com/blog/2304517
css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite
css sprite雪碧图生成小工具 v4.3 css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite ,请需要的朋友注意版本更新
NULL 博文链接:https://bijian1013.iteye.com/blog/2265234
css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite ,请需要的朋友注意版本更新,下载最新版。 博客园地址:http://www.cnblogs.com/wang4517/p/4493917.html
效果描述: 之前看到一个网站,用户上传自己喜欢的...今天特意整理了一个用纯CSS3实现的滤镜图片效果供给大家参考 使用方法: 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
TexturePackerGUI css sprite 雪碧图 破解版 亲测完全没有问题。包内带有安装方法,1/2两部曲,5秒钟安装完。小白都可以用
css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite
项目源码:当前项目为从一个固定目录读取原始的png图标文件,按照自己的要求生成图标CSS样式以及雪碧图和雪碧图的CSS样式文件
css sprite 雪碧图生成小程序,已在github上开源,地址:https://github.com/iwangx/sprite ,请需要的朋友注意版本更新,下载最新版。 博客园地址:http://www.cnblogs.com/wang4517/p/4513711.html
CssSprite雪碧图制作工具 优点:简单好用
雪碧图工具CssSprite.exe 快速生成雪碧图及代码的工具,很好使