在HTML5中屏蔽图片的最佳方式 [英] Best way to mask an image in HTML5
本文介绍了在HTML5中屏蔽图片的最佳方式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道在HTML 5中掩蔽图片的最佳方法是什么?
事实上,我想在图库中显示圈子缩略图,准备圆形图片...
你有其他想法吗?最佳做法?
感谢
解决方案
>
- - 通过在所需元素上使用透明png
- css3
- 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
andmask-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
掩码
和 mask-clip
属性(这里是一个不错的演示: http://www.webkit.org/blog/181/css-masks/ ) $ b $ p>选择取决于目标浏览器和您想投资的时间。
对于完全跨浏览器的结果,我推荐旧的方式,但如果你想更多的形状(也许是动态的)或更多的只是图像掩蔽,你可以尝试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 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屋!
查看全文