css工程师技巧,web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操作教程）...

CSS Sprites

CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

使用CSS Sprites的优劣

使用CSS Sprites可以很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点。

但是维护起来比较麻烦。这里我分享一下我自己实际运用中的工具、方法和技巧。

工具准备

打开Fireworks新建一张图，把LOGO放进去(这里为了方便演示，LOGO图片位置随意放的)，保存图片命名为sprite.png如下图：

Fireworks很方便，选择LOGO后，下方直接显示出LOGO的图片大小跟坐标位置。

假设我们要使用LOGO图片

对应的CSS代码

.logo {

background:(../images/sprite.png) no-repeat;

background-position:-24px -40px;

/*这里使用负值，前面加-号*/

width:210px;height:52px;

}

也可以简写成:

.logo {

background:(../images/sprite.png) -24px -40px no-repeat;

width:210px;height:52px;

}

然后再导出图片(建议把源文件跟导出图分开，这样如果以后要修改图片内容或者增加图片内容，就直接在源文件图片里编辑，再导出就可以了，方便管理)

当然网上还有一些CSS Sprites生成工具，方便是方便，不过修改起来麻烦，还是自己制作比较好，方便管理修改，而且图片的质量也能得到保证

css工程师技巧,web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操作教程）...相关推荐

php工程师和前端工程师,什么是web前端工程师？web前端工程师是干什么的
很多小白都感觉web前端工程师很高大上,更不知道什么是web前端工程师?web前端工程师是干什么的,那么php中文网就为大家介绍一下web前端工程师.[推荐阅读:前端开发用什么工具] 一:什么是web ...
ui设计师要会html和css吗,UI设计师转行成为Web前端工程师需要学什么
今天小编要跟大家分享的文章是关于UI设计师转行成为web前端工程师需要学什么.本文详细解读学web前端该学习哪些专业知识!当然也适用于所有想转型web前端的亲们!下面来和小编一起看一看吧! 一.如何学 ...
vue 高阶面试题_高级Web前端工程师面试之Vue问题汇总解析
又是一年毕业季,很多学习前端的同学面对激烈的求职竞争倍感压力,想要了解企业招聘会提问哪些问题.今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师面试中有关Vue的问题及解析. 1.Vu ...
如何成为一名优秀的web前端工程师[转]
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优 ...
福利 | 抽奖送现金送书《Web前端工程师修炼之道》
很多关注了我的公众号的粉丝可能都不知道我,趁这次机会简单介绍下. 你好,我是若川.江西人,某不那么知名的陶瓷大学毕业生,目前在杭州从事前端开发工作.常以若川为名混迹于江湖.更详细的可以点击关于我我历 ...
如何成为一名优秀的web前端工程师（前端攻城师）
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优 ...
如何成为一名优秀的web前端工程师
我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 如何成为一名优秀的web前端工 ...
前端html css3修炼之道,Web前端工程师修炼之道（原书第5版）
Web前端工程师修炼之道(原书第5版) 作者:(美)珍妮弗·尼德斯特·罗宾斯(Jennifer Niederst Robbins) 著出版日期:2020年10月文件大小:179.64M 支持设备: ...
从零基础到web前端工程师（三）
前文连接:从零基础到web前端工程师(二) CSS选择器文章目录 CSS选择器初始CSS 引入CSS样式表内部样式表行内式(内联样式) 外部样式表(外链式) 三种样式表总结(位置) CSS样式 ...
WEB前端工程师 – 职业生涯规划
众所周知,搞开发的职业不论是哪个方面都不是简单的职业,WEB前端工程师更是如此.两年前,前端这个词还没有被关注,几乎所有人都认为那就是个写html的,其实现在WEB前端需要掌握的知识实在是太多了.千万 ...

css工程师技巧,web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操作教程）...

css工程师技巧,web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操作教程）...相关推荐

最新文章

热门文章