【发布时间】：2012-01-10 09:00:15
【问题描述】：
我想知道在 HTML 5 中屏蔽图像的最佳方法是什么？
事实上，我想在画廊中显示圆形缩略图，而不会打扰我的客户准备圆形图片...
所以，在我看来，我有两个选择：Canvas masking 或 old fashioned way
你有其他想法吗？最佳做法？
谢谢
【问题讨论】：
-
我的回答对你有帮助吗？如果它确实投票给我作为正确答案
【发布时间】：2012-01-10 09:00:15
【问题描述】：
你可以使用
- 老式方式 - 在所需元素的顶部使用透明 png
- 图像的 css3
border-radius设置为其尺寸的一半（以便边框定义一个圆圈） - css3
mask和mask-clip属性（这是一个很好的演示：http://www.webkit.org/blog/181/css-masks/） - 画布做掩蔽
- 以图像为背景图案的 svg 圆圈
选择取决于目标浏览器和您想要投入的时间。
对于完全跨浏览器的结果，我推荐老式方式，但如果您想要更多形状（可能是动态形状）或不仅仅是图像遮罩，您可以尝试 svg 或 canvas。
【讨论】：
-
CSS3 掩码仅适用于 WebKit。
-
当然我想要一个跨浏览器可行的结果.. II 将动画蒙版和圆圈的大小，所以我认为使用 css3 边界半径是最合适的技术，不要'你觉得呢？
-
@gion_13 不错的选项摘要，但如果您包含详细信息，这可能是一个很好的答案（例如，有一个链接或代码显示如何执行每个操作，例如使用 @987654326 屏蔽
drawImage@
-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
【讨论】：
-
或者把它放到img而不是div上jsfiddle.net/jalbertbowdenii/WQSLa/3
这是最适合我的方法：
- 创建您想要的蒙版形状的 SVG。
- 编辑适当元素的 css 并为掩码指定 SVG 的 URL
对于 200 像素的圆圈，您的 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/。
【讨论】：
-
关于您提供的示例，是否应该将 css 应用于图像？即：
<img src="/images/myimage.jpg" id="image-mask">.
要更新答案，请尝试clip-path（请参阅this css-tricks post）。
caniuse 现在显示超过 80% 的支持，如果您也使用 -webkit- 前缀。所以这对我有用（不过，IE/Edge 可能是限制因素）：
clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);
【讨论】：