在HTML5中屏蔽图片的最佳方式 [英] Best way to mask an image in HTML5

问题描述

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

事实上，我想在图库中显示圈子缩略图，准备圆形图片...

所以我认为有两个选择：画布遮罩或老式的方式

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

感谢

解决方案

>

• - 通过在所需元素上使用透明png


• 将图片集的css3 border-radius 设置为其一半尺寸（以便边框定义一个圆圈）


• css3 mask 和 mask-clip 属性（这里是一个不错的演示： http://www.webkit.org/blog/181/css-masks/ ）


• 画布

选择取决于

对于完全跨浏览器的结果，我推荐旧的方式，但如果你想要更多的形状（可能是动态的一个）或多于只是图像掩蔽，你可以尝试svg或画布。

I was wondering what is the best way to mask images in 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 masking or old fashioned way

Do you have others ideas ? Best practices ?

Thanks

解决方案

you could use

• the old fashioned way - by using a transparent png on top of the desired element
• the css3 border-radius of the image set to half of it's dimensions (so that the border defines a circle)
• the css3 mask and mask-clip properties (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

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.

这篇关于在HTML5中屏蔽图片的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！