Html 在 HTML5 中屏蔽图像的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8337570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to mask an image in HTML5
提问by Jk_
I was wondering what is the best way to mask images in HTML 5 ?
我想知道在 HTML 5 中屏蔽图像的最佳方法是什么？
In fact I would like to display circle thumbnails in a gallery without bothering my client with the preparation of the circular pictures...
事实上，我想在画廊中显示圆形缩略图而不用准备圆形图片来打扰我的客户......
So I have, in my opinion, two options : Canvas maskingor old fashioned way
Do you have others ideas ? Best practices ?
你有其他想法吗？最佳实践？
Thanks
谢谢
回答by gion_13
you could use
你可以用
- the old fashioned way- by using a transparent png on top of the desired element
- the css3
border-radiusof the image set to half of it's dimensions (so that the border defines a circle) - the css3
maskandmask-clipproperties (here's a nice demo : http://www.webkit.org/blog/181/css-masks/) - canvas to do the masking
- svg circles with the image as background-pattern
- 的老式方法-通过使用所期望的元件的顶部上的透明的PNG
border-radius图像的 css3设置为其尺寸的一半（以便边框定义一个圆圈）- css3
mask和mask-clip属性（这是一个很好的演示：http: //www.webkit.org/blog/181/css-masks/） - 画布做遮罩
- 以图像为背景图案的 svg 圆圈
The choice depends on the targeted browsers and the time you want to invest.
For a fully cross-browser result, I recommend the old fashioned way, but if you want more shapes (maybe dynamic ones) or more than just image masking, you could try svg or canvas.
选择取决于目标浏览器和您想要投资的时间。
对于完全跨浏览器的结果，我推荐老式方法，但如果您想要更多形状（可能是动态形状）或不仅仅是图像遮罩，您可以尝试使用 svg 或 canvas。
回答by aWebDeveloper
-circle {
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
border-radius: 61px;
border:1px solid #aaaaaa;
width:122px;
height:122px;
}
see this
看到这个
check this http://jsfiddle.net/WQSLa/1/
检查这个http://jsfiddle.net/WQSLa/1/
EDIT
编辑
u can also try this http://jsfiddle.net/jalbertbowdenii/WQSLa/3as suggested by albert
你也可以按照 albert 的建议试试这个http://jsfiddle.net/jalbertbowdenii/WQSLa/3
回答by Ryan
Here's the method that works best for me:
这是最适合我的方法：
- create an SVG of the shape of mask you want.
- edit the css of the appropriate element and specify the URL of the SVG for the mask
- 创建一个你想要的面具形状的 SVG。
- 编辑适当元素的 css 并为掩码指定 SVG 的 URL
For a 200px circle, your SVG could look like this:
对于 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>
And your CSS could look like this:
您的 CSS 可能如下所示：
#image-mask {
width: 200px;
height: 200px;
mask: url('/static/images/avatarmask.svg');
-webkit-mask-image: url('/static/images/avatarmask.svg');
}
And if you want something more in-depth, I found this guide to be very helpful: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.
如果你想要更深入的东西，我发现这个指南非常有帮助：http: //collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/。
回答by dhc
To update the answer, try clip-path(see this css-tricks post).
要更新答案，请尝试clip-path（请参阅此 css-tricks 帖子）。
caniuseshows over 80% support now, if you use the -webkit-prefix as well. So this is working for me (IE/Edge, though, may be limiting factors):
如果您也使用-webkit-前缀，caniuse现在显示超过 80% 的支持。所以这对我有用（不过，IE/Edge 可能是限制因素）：
clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);
