【Web Trick 五】CSS替代图片

【Web Trick 5】CSS替代图片

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

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

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

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

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