找回密码
当前位置：前端开发者 > CSS > 正文

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

2018-10-25 分类：CSS 阅读(900) 评论(0)
前端开发手机默认字体
前端手机端开发
手机前端开发的流程

圆形头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明。
这里需要注意的是需要把图片保存成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>
厦门 手机前端开发
前端开发可以应用到手机吗
前端手机端开发经验
赞(0)
前端开发者 » 前端开发兼容所有浏览器圆形头像的CSS
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论