0

私のウェブサイトで、プロフィール写真が特定の領域で円形になっていることを示したいと思います。私のフォルダでは、長方形のページにあります。そのために私は次のスタイルを使用していますが、機能していません

<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); 
}

どちらもマスクされていません。誰でも私を助けてください

4

2 に答える 2

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

それはそれを行う必要があります。

于 2013-08-29T10:13:33.230 に答える
1

境界半径が最適なソリューションです。IE8 をサポートしたい場合は、border-radius がサポートされていないため、問題が発生します。したがって、マスクを使用したソリューションがより適切になります。または、将来、円以外の別の効果を持つマスクを使用したくなるかもしれません。だからここに解決策があります：

.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;
}
于 2013-08-29T10:31:37.090 に答える