码迷,mamicode.com
首页 > Web开发 > 详细

兼容所有浏览器圆形头像的CSS

时间:2014-11-05 12:34:26      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:style   io   color   ar   os   使用   for   sp   strong   

圆形头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明。

 这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿。24位的png或32位的png的圆弧透明(半透明)图片则非常光滑,但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持),需要我们额外的一下处理;使用 AlphaImageLoader就可以解决IE6不能显示24位和32位PNG的透明,
但使用 AlphaImageLoader 筛选器的元素必须有宽高,width:XXpx; height:XXpx;ie6下必须充值背景为none,_background:none

 

<style>

#test{position:relative; top:0; left:0;width:300px;height:300px;background:#000;}
#test span{position:absolute; top:0; left:0;width:200px;height:200px;background:url("路径/中间透明的图片.png");color:#fff;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘路径/中间透明的图片.png
‘,sizingMethod=‘crop‘);}
</style>
<div id="test"><img src="图片地址" width="200" height="200" /><span></span></div>

兼容所有浏览器圆形头像的CSS

标签:style   io   color   ar   os   使用   for   sp   strong   

原文地址:http://www.cnblogs.com/chanbee/p/4075900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!