css - 使图像显示为圆形

Question

我找到了一种使用 CSS3 的方法，但 IE 仍然不支持它。我想知道是否有办法做到这一点，以便它可以与所有流行的浏览器兼容。我知道我可以使用蒙版来做到这一点，但是如果我想在后台显示用户上传的图像，这不是一个选项，或者至少我不知道如何实现。谁能给我一个想法？上传图片时可能会在后台进行图像处理，将其变成圆形并制作透明背景，但我不知道如何处理？

Answer 1

您可以通过 CSS3 执行此操作border-radius，但正如您所提到的，旧 IE 不支持此属性。

但是PIE.htc（在我的例子中是 PIE.js）可以填充这个 -

因此- http://codepen.io/hwg/pen/IBrow。

这使用了标准border-radius，和一个复制粘贴的 pie.js，边框半径是图像高度和宽度的 50%。

我不能说性能（请参阅文档），但我认为这可以满足您的要求。

Answer 2

您可以使用所需的背景颜色覆盖在正方形中间有一个透明圆圈的 PNG 图像。然后将其放置在上传的图像上，使其具有圆形的错觉。