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/

修改

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

Answer 3

以下是最适合我的方法：

创建一个你想要的面具形状的SVG。
编辑相应元素的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）。

如果同时也使用-webkit-前缀，

caniuse将显示80％以上的支持。所以这对我有用（不过，IE / Edge可能是限制因素）：

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

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

4 个答案: