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

Jk_*_*Jk_ 8 html5 canvas mask css3

我想知道在HTML 5中屏蔽图像的最佳方法是什么?

事实上,我想在一个画廊中显示圆圈缩略图,而不用打扰我的客户准备圆形图片......

在我看来,我有两个选择:Canvas masking老式方式

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

谢谢

gio*_*_13 13

你可以用

  • 老式方法 -通过使用所期望的元件的顶部上的透明的PNG
  • border-radius图像的css3 设置为其尺寸的一半(以便边框定义一个圆)
  • css3 maskmask-clip属性(这是一个很好的演示:http://www.webkit.org/blog/181/css-masks/)
  • 帆布做掩蔽
  • svg圈子与图像作为背景图案

选择取决于目标浏览器和您想要投资的时间.
对于完全跨浏览器的结果,我建议采用老式的方式,但如果你想要更多的形状(可能是动态的)或者不仅仅是图像蒙版,你可以试试svg或canvas.

  • CSS3 Masking只是WebKit. (3认同)