css相容ie瀏覽器下面圓形問題
阿新 • • 發佈：2019-02-11
網上搜到的，這個辦法確實可行的，原理就是做一張遮罩圖片（中間是圓形，其他顏色根據背景色設定），然後設定浮動到要顯示的圖片上，設定個z-index就可以了。
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;
height: 50px;
z-index: 9;
}
icon-wapper的圖片製作直徑為50px的透明圓形如下圖，四角黑色為頭像的背景色
icon的圖片可以是任意的，如下圖
結果如下圖
具體情況請做具體調整