javascript - 如何在图像上制作圆形蒙版

Question

这是我只使用 css 拍摄的，但是图像没有居中，而且图像变大了，而不是蒙版

jsfiddle Demo

我想在这里达到同样的效果

http://jackietrananh.com/portfolio.php

他正在使用图像 http://jackietrananh.com/img/sprite-s82d3b02845.png但是纯 css 或 js 怎么会发生这种情况呢？

没有

clip-path

Answer 1

.avatar-frame{border: 2px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
    width: 50px;
    height: 50px;
    -webkit-border-radius: 30px; /* Saf3+, Chrome */
    border-radius: 30px; /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
    }

更多在这里 http://www.html5rocks.com/en/tutorials/masking/adobe/