CSS面具是否可用

Question

是否可以在CSS中使用掩码

我想知道我是否可以使用面具来做这样的事情。

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

如果我能做到这样的话会很好。

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

如果我不能这样做，是唯一的另一种方法在Photoshop中做到这一点，然后有一个扁平的正方形图像，其中的脸在圆圈内。

Answer 1

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

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

检查此 D'oh 演示http://jsfiddle.net/p57fs/

Answer 2

如果图像本身已被裁剪，您可以在图像上使用CSS border-radius属性，或者在容器div上“屏蔽”图像。

选项1

在图片上使用border-radius。 See this demo。使用单个HTML标记实现这一点更简单，但您并没有真正按照这种方式屏蔽图像（因此您的图像需要正确裁剪）。

选项2

在容器div上使用border-radius。这使您可以更好地控制图像的位置。 see this demo

请注意，较旧的浏览器（see here）不支持border-radius属性。如果不支持，则会出现方形图像，因此我猜该网站仍然可以正常运行