如何使用CSS Sprites优化你的网站

双刀烤鸭

双刀烤鸭

2016-02-19 17:25

有了下面这个如何使用CSS Sprites优化你的网站教程,不懂如何使用CSS Sprites优化你的网站的也能装懂了,赶紧get起来装逼一下吧!

  使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中,即你的一张CSS Sprites由10张图片组成,那将避免9次HTTP请求,这减少的9次请求时延,正是加速的加载时间。这也有问题,跟每个HTTP请求的服务器开销一样,需由Apache的子进程管理,占用20MB的内存。你最好帮你的服务器进程减少HTTP请求:卸载媒体到Web前端Amazon S3,诸如此类。

  下面是两个CSS Sprites,一个是Google的,一个是PaulStamatiou的。

  照猫画虎,把你网站上经常使用的web图片元素打包——比如你的Logo,RSS图标,还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具,把它们放在单个的图片里。你可以尽贴着放置图片,但要是你稍微留点白再下一步选中会更简单些,然后保存图片。

  编写CSS代码

  有了CSS Sprites,你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理:只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击,选择编辑切片。在弹出的窗口会有图片的分辨率和位置。

  在这个示例中,我选用大小为42×42px的图,它有336px的偏移(译注:是指左偏移)并紧贴着顶部。这样便形成了相应的CSS:

a.stammy, a.stammy:hover{
     background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
     display:block;
     height:42px;
     width:42px;
     text-indent:-9999px;
     overflow:hidden;
}

  CSS选择器对所有含 class="stammy" 属性的链接都有效。背景属性载入精灵图片,然后设置背景图位置为负值(其必为负)。如果图片离顶部有10个像素,那背景位置应该是“-336px -10px”。之后在CSS中设置了宽和高。我对悬停伪类(hover pseudoclass)也进行了设置,因为有一次当我悬停在该类的链接上时,会改变链接的悬停状态的颜色,从而背景图会消失。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  设置溢出隐藏“解决当你选择要替换的文本的时候,那高亮部分会一直延伸到屏幕左侧的烦人问题”,正如Rob所说。对其他所有图片如法炮制,并对每个选择器命名。

  编写XHTML代码

  目今你已经对每个图片有一些CSS选择器。至此你已经搞定了大问题,还差最后一步。现在只需对每个选择器创建链接。

  a class="stammy" href="http://whatever.com" title="Paul Stamatiou"Paul Stamatiou/a

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  相当简单吧?用CSS和链接设置类,将精灵的信息组合起来,只显示精灵的一部分。虽此,因为我们甚至没使用一个img标签,我们不能设置alt属性,而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中,再用CSS文本缩进将其移出屏幕范围,这样你就无需吧文字叠在图片上而同样具有可用性。

展开更多 50%)
分享

猜你喜欢

如何使用CSS Sprites优化你的网站

Web开发
如何使用CSS Sprites优化你的网站

CSS Sprites技术以及图片优化

Web开发
CSS Sprites技术以及图片优化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS Sprites优化网页代码的方法

Web开发
CSS Sprites优化网页代码的方法

CSS Sprites图片切割术与图片优化

Web开发
CSS Sprites图片切割术与图片优化

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计中谨慎使用CSS sprites

Web开发
网页设计中谨慎使用CSS sprites

CSS高级技巧:CSS Sprites

Web开发
CSS高级技巧:CSS Sprites

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10怎么禁止系统自动更新

Win10怎么禁止系统自动更新

Windows 8 下怎么设置锁屏后的通知?

Windows 8 下怎么设置锁屏后的通知?
下拉加载更多内容 ↓