在HTML5中屏蔽图像的最佳方法

Question

我想知道在HTML 5中屏蔽图像的最佳方法是什么？

事实上，我想在一个画廊中显示圆圈缩略图，而不用打扰我的客户准备圆形图片......

在我看来，我有两个选择：Canvas masking或old fashioned way

你有其他想法吗？最佳做法？

谢谢

Answer 1

你可以用

• 老式的方式 - 在所需元素的顶部使用透明的png
• 将图像的css3 border-radius设置为其尺寸的一半（以便边框定义圆形）
• css3 mask和mask-clip属性（这是一个很好的演示：http://www.webkit.org/blog/181/css-masks/）
• 帆布做掩蔽
• svg圈子与图像作为背景图案

选择取决于目标浏览器和您想要投资的时间。 对于完全跨浏览器的结果，我建议采用老式的方式，但如果你想要更多的形状（可能是动态的）或者不仅仅是图像蒙版，你可以试试svg或canvas。

Answer 2

  -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

看到这个

检查这个http://jsfiddle.net/WQSLa/1/

编辑

你也可以按照阿尔伯特的建议尝试这个http://jsfiddle.net/jalbertbowdenii/WQSLa/3

Answer 3

这是最适合我的方法：

1. 创建一个你想要的面具形状的SVG。
2. 编辑相应元素的css并指定掩码的SVG的URL

对于200px的圆圈，您的SVG可能如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>

你的CSS看起来像这样：

#image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

如果你想要更深入的东西，我发现这个指南非常有帮助：http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/。

Answer 4

要更新答案，请尝试clip-path（请参阅this css-tricks post）。

如果您使用caniuse前缀，-webkit-现在显示超过80％的支持。所以这对我有用（IE / Edge，可能是限制因素）：

clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);