前端开发兼容所有浏览器圆形头像的CSS

前端开发手机默认字体
前端手机端开发
手机前端开发的流程

圆形头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明。
这里需要注意的是需要把图片保存成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>
厦门 手机前端开发
前端开发可以应用到手机吗
前端手机端开发经验
» 本文来自:前端开发者 » 《前端开发兼容所有浏览器圆形头像的CSS》
» 本文链接地址:https://www.rokub.com/6291.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!