css三种图片格式比较及背景透明度
图片 :
- jpg
特点
:可压缩,色彩丰富,压缩后图形变模糊,但保存大小会变小。缺点
:不能保存图层,不支持透明和动图。 - png
特点
: 能够保存图层,支持透明和半透明缺点
: 不能压缩,如果图片色彩丰富,图形复杂同样一个图片大小会远大于jpg图片
如果图片较小,保存png有可能比jpg小。 - GIF
特点
:可以保存图层,可以制作动图,支持透明。缺点
:不支持半透明优势
:透明效果在IE6中没有兼容问题,而png透明和半透明在IE6中都有兼容问题。可以用GIF替换背景透明的PNG来解决兼容问题。用途:保存动图,解决IE6兼容问题。
- jpg
透明
盒子透明:
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]-->