兼容ie8以下的圆角头像制作方法

本文主要是介绍兼容ie8以下的圆角头像制作方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html代码

<div class="user-img">
              <img src="xx.png" class="icon-wapper">
              <img src="qq.jpg" class="icon">
</div>

css代码

.user-img{

    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.user-img img{
    width: 50px;
    height: 50px;
}
.icon-wapper{
    position: absolute;
    z-index: 10;
}

.icon{

    position: absolute;

    width: 50px;
    height: 50px;
    z-index: 9;

}

icon-wapper的图片制作直径为50px的透明圆形如下图，四角黑色为头像的背景色

icon的图片可以是任意的，如下图

结果如下图

具体情况请做具体调整

这篇关于兼容ie8以下的圆角头像制作方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---