【Web Trick 5】CSS替代图片

来源：互联网发布：linux 多核启动编辑：程序博客网时间：2024/05/16 18:42

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

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

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

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

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

初始状态鼠标over时状态

下面说一下主要做法

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

b {-moz-transition: -moz-transform 0.2s ease-in 0s;-webkit-transition:transform 0.2s ease-in 0s;-o-transition:transform 0.2s ease-in 0s;    border-color: #666666 #F5F5F5 #F5F5F5;    border-style: solid;    border-width: 4px;    font-size: 0;    height: 0;    line-height: 0;    width: 0;    position: absolute;    left: 55px;    top: 15px;  }

然后给出鼠标over时的变化CSS

b.hover {    -moz-transform: rotate(180deg);    -moz-transform-origin: 50% 30%;    border-color: #666666 #FFFFFF #FFFFFF;    -webkit-transform: rotate(180deg);    -webkit-transform-origin: 50% 30%;    -o-transform: rotate(180deg);    -o-transform-origin: 50% 30%;}

接下来当鼠标over时就可以看到效果了，但是这个在IE中会出问题，因为用了CSS 3

的transform，为了在IE中得到一样的效果，我们可以用滤镜，也可以用js去实现

滤镜实现

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

js实现

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技术时需要注意不能设置平铺，如果你需要平铺，比如背景，

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