将图像转换为圆形

Question

我正在尝试将“平方”图像转换为圆形图像 图像是48x48，边界是平方的。

我想用HTML / Javascript / CSS裁剪它，把它变成一个圆圈。

Answer 1

将该图片设为div background-image，然后将div的border-radius设置为50%。很简单就是这样。 ：）

Fiddle.

div的CSS：

div {
    width: 48px;
    height: 48px;
    background: url(your_image_url.your_image_extension);
    border-radius: 50%; /*the magic*/
}

Answer 2

如果您只想使用 javascript ，则可以使用：

<img src='.../images/myImage.png' id="id">
<script>
document.getElementById('id').style.borderRadius = '50%';
</script>

Answer 3

另一种方法是将图像放入编辑器中，然后剪切正方形的角。因此，您不想要的部分需要透明。当您将它放在网页中时，透明部分将从后面继承颜色。