【Web Trick 五】CSS替代图片

2012-12-16

【Web Trick 5】CSS替代图片随着互联网内容越来越丰富，我们所架的网站也越来越复杂，很多时候我们都会听到用

【Web Trick 5】CSS替代图片

随着互联网内容越来越丰富，我们所架的网站也越来越复杂，很多时候我们都会

听到用户抱怨，这个网站怎么那么卡，半天载不进来等等之类的话，这个时候我

们就要考虑去优化自己的网站了，优化的方法很多，主要是针对不同的架构去做

不同的调研，比如用CSS sprites技术来减少请求，这里主要讲一个用CSS来代

替图片的技巧，达到如下效果：

初始状态鼠标over时状态

【Web Trick 五】CSS替代图片

下面说一下主要做法

在页面中加一个b标签，用CSS配置它

if($.browser.msie){$("b").hover(function(){$(".profile li a b").css("border-color","#ffffff #ffffff #666666 #ffffff");},function() {$(".profile li a b").css("border-color","#666666 #ffffff #ffffff");});}

这里只是展示一个简单的例子，想表达的意思是传达这样一种思想，能用CSS实现的可以

用CSS实现，减少静态资源，给自己的网站减负

PS：用CSS sprites技术时需要注意不能设置平铺，如果你需要平铺，比如背景，

你必须将要平铺的图片放在一行或是一列

热点排行

Web前端

【Web Trick 五】CSS替代图片