使用css的图像遮罩
问题描述:
在我的网站上,我想显示个人资料图片是在一个特定区域的圆形状。在我的文件夹中它是在矩形页面。对于我使用下面的样式,但不是不工作使用css的图像遮罩
<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);
}
两者都没有被屏蔽。任何人请帮助我
答
<div class="circle">
<img src="~/Content/Member/MemberPhotos/default_user_icon.jpg" style="border-radius: 50% 50% 50% 50%" />
</div>
这应该做到这一点。
答
边框半径将是最好的解决方案。 如果你想支持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;
}
将'overflow:hidden'添加到'.circle'(第二个)。 – putvande