圆形掩模使用图像本身和纯CSS的图像

Question

我实际上想知道是否可以使用单个伪元素将图像屏蔽为圆形，这是图像本身？让我们说它是一个矩形图像（不是正方形），你想让它被掩盖成圆形，而不会挤压图像？

所以你有：

HTML

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

CSS

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

我知道，使用父级div并使用overflow:hidden＆amp; 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 */
}

---

如果你可以使用一个包装器，它可以保持图像和掩码使用的原始空间可以通过coordonates在它上面的任何位置。的 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;
}