css三种图片格式比较及背景透明度

css三种图片格式比较及背景透明度

• 图片 :

  • jpg 
    特点：可压缩，色彩丰富，压缩后图形变模糊，但保存大小会变小。 
    缺点：不能保存图层，不支持透明和动图。
  • png 
    特点： 能够保存图层，支持透明和半透明 
    缺点： 不能压缩，如果图片色彩丰富，图形复杂同样一个图片大小会远大于jpg图片 
    如果图片较小，保存png有可能比jpg小。
  • GIF 
    特点：可以保存图层，可以制作动图，支持透明。 
    缺点：不支持半透明 
    优势：透明效果在IE6中没有兼容问题，而png透明和半透明在IE6中都有兼容问题。可以用GIF替换背景透明的PNG来解决兼容问题。 
    用途：保存动图，解决IE6兼容问题。

• 透明 
  盒子透明： 
  opacity和rgba()的区别: opacity盒子里面所有元素都透明，rgba()只是背景色透明。 
  opacity:有兼容性问题，在IE8及以下，都不能加载透明度属性。 
  IE浏览器中有一个自己的设置透明度的属性： 
  盒子兼容性透明度写法：

   opacity: 0.5;
   filter: alpha(opacity=50);
  

png图片在IE6中兼容问题: 
1, 如果图片只有透明没有半透明，可以用GIF代替PNG 
2，引入一段JS文件：

 <!--[if IE 6]>
<script src="js/iepng.js"></script>
<script src="text/javascript">          EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
 </script>
 <![endif]-->