CSS遮罩是否可用？

Question

CSS中是否可以使用蒙版呢？

我在想是否可以使用蒙版来实现类似于这样的效果。

http://www.ttmt.org.uk/face.png

如果可以，最好是这样做。

    <div class="circle">
      <img src="face.jpg" alt="" />
    </div> 

如果不能使用这种方法，唯一的另一种方法是在Photoshop中完成，并将面部放在圆形内的平面正方形图像。

- ttmt

Answer 1

您只需在容器上使用属性border-radius和overflow:hidden。像这样：

.circle {
  width:300px;
  height:300px;
  border-radius:50%;
  overflow:hidden;
}

看看这个 D'oh 演示 http://jsfiddle.net/p57fs/

- DaniP

---

我应该放在 /comment/ 中的参考链接是：http://css-tricks.com/almanac/properties/b/border-radius/。 - Jason M. Batchelor

@mori57，我看不到你的编辑是在我添加信息的同时进行的，但现在你可以随意添加你的链接 :d - DaniP

没问题。这种新发现的编辑能力直接冲到了我的脑袋上！:) 你那里有一个很好又快速的演示。:) - Jason M. Batchelor

Answer 2

您可以在已经裁剪的图像上使用CSS border-radius属性，也可以在容器div上使用该属性来“遮盖”图像。

选项1

在图像本身上使用border-radius。 查看此演示。这种方法只需要一个HTML标签就可以实现，但是您并没有真正地遮盖图像（因此您的图像需要正确裁剪）。

选项2

在容器div上使用border-radius。这样可以更好地控制图像的位置。 查看此演示。

请注意，旧版浏览器不支持border-radius属性（请参见此处）。如果不支持，则会显示一个方形图像，因此我想网站仍然可以正常运行。

- motatoes