使用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; 
}