仅使用图像本身和纯 CSS 对图像进行圆形遮罩

Question

我实际上想知道是否可以使用单个伪元素（即图像本身）将图像屏蔽为圆形？假设它是一个矩形图像（不是正方形），并且您希望将其蒙版为圆形，而不压缩图像？

所以你有：

HTML

<img src="#" class="mask">

CSS

.mask {
  A lot of CSS possibilities, up to you
}

我知道，使用父 div 并使用 overflow:hidden 和 border-radius:50% 是可能的，但你可以不使用第二个伪元素来做到这一点吗？

更新！

我注意到许多用户似乎认为我只是在寻找 CSS 代码 border-radius:50% 来创建圆形，但事实并非如此。图像应该变成圆形，而不是椭圆形。您可以简单地使用彼此相等的width 和height，但随后图像会被挤压。 答案应包含未压缩的图像结果

解决方案的要求
- 图像应该是一个完美的圆形，而不是椭圆
- 无论原始纵横比如何，都不应挤压图像。 即使你使用全景图片，你也只会看到中间部分为圆形，其余部分被隐藏。

Answer 1

如果您只能使用 img 标签在其自身上生成掩码，那么我能想到的唯一解决方法是：DEMO

.mask {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
    padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}

---

如果您可以使用包装器，它可以保留图像使用的原始空间，并且可以通过坐标将遮罩放置在其顶部的任何位置。 DEMO

标记：

<div class="mask r150 top100 left150">
    <img src="http://placehold.it/300x400" />
</div>

CSS：

.mask {
    position:relative;
    overflow:hidden;
    display:inline-block;/* preserve display behavior of initila image to mask*/
    box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
    display:block;/* a way to remove bottom gap*/
}
.mask:before {
    content:'';
    position:absolute;
    border-radius:100%;
    box-shadow:0 0 0 2000px white;
}
.r150:before {
    height:150px;
    width:150px;
}
.top100:before {
    top:100px; 
}
.left150:before {
    left:150px;
}

使用额外的类可以帮助您调整不同的大小和蒙版位置。

Answer 2

这里小提琴：http://jsfiddle.net/8CuXQ/

类似这样的：

.mask {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}