在圈子的长方形图象有透明的背景

Question

我必须实现这样的弹出窗口:

它可以出现在屏幕上的任何位置.我需要将50x50矩形Facebook个人资料图片放在一个带有白色边框的圆圈内.所以我需要在保持背景显示的同时修剪轮廓图像.问题是背景是图像本身,因此在圆圈外面具有纯色的蒙版图像将不起作用.

HTML/CSS/jQuery以某种方式可能吗？

Answer 1

我只是border-radius用来创建圆圈,结合overflow:hidden使其裁剪图像.这是一个例子:http://jsfiddle.net/6LHNy/

标记:

<div class="wrapper">
    <img src="http://www.petscarecenter.com/wp-content/uploads/2011/05/dog.jpg" />
</div>

相关的CSS:

.wrapper {height:100px; width:100px; border-radius:100px; border:4px solid white; overflow:hidden}?