使用css的图像遮罩

Question

在我的网站上，我想显示个人资料图片是在一个特定区域的圆形状。在我的文件夹中它是在矩形页面。对于我使用下面的样式，但不是不工作

<div class="circle"> 
    <img src="~/Content/Member/MemberPhotos/default_user_icon.jpg"/></div> 
</div> 

试图用一个形状像

.circle { 
width:100px;height:100px; 
overflow: hidden; 
-webkit-mask-image: url(crop.png); 
} 

掩盖，也尝试了下面的CSS

.circle { 
width:100px; 
height:100px; 
border-radius: 50px; 
background-color:#000; 
clip: rect(0px,50px,100px,0px); 
} 

两者都没有被屏蔽。任何人请帮助我

Answer 1

<div class="circle"> 
<img src="~/Content/Member/MemberPhotos/default_user_icon.jpg" style="border-radius: 50% 50% 50% 50%" /> 
</div> 

这应该做到这一点。

Answer 2

边框半径将是最好的解决方案。 如果你想支持IE8，那么你将有一个问题，因为它不支持边界半径。所以你的面具解决方案会更合适。或者，也许在将来某个时候，您会想要使用具有其他效果的面罩，而不是圆形。因此，这里有一个解决方案：

.circle{ 
width:100px; 
height:100px; 
position:relative; 
} 

.circle:after{ 
content:""; 
width:100px; 
height:100px; 
left:0px; 
top:0px; 
background-image:url(crop.png); 
z-index:5; 
}