圆形头像的制作原理就是在头像上覆盖一张透明的图片, 把四个角颜色设置成页面的背景颜色, 中间透明.
这里需要注意的是需要把图片保存成 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
html 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <style>
- #test{position:relative; top:0; left:0;width:100px;height:100px;} #test
- span{position:absolute; top:0; left:0;width:90px;height:90px;background:url("TeacherHead.png")
- no-repeat;color:#fff;_background:none;}
- </style>
- <div id="test">
- <img src="221.png" width="90" height="90" />
- <span>
- </span>
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.qdfuns.com/article/25766/d5cbe1b25a3d6457bc832024f02de5ca.html