html - JavaScript 中的 CSS webkit-image-mask 替代方案？

Question

我正在处理我的作品集，我想用 PNG mask 一些图片，这与 webkit 图像 mask 一起工作，但是，我想在 FF 和 Opera 中得到相同的结果，你知道 JavaScript脚本有相同的结果？

我尝试使用 edge.js 但只能使用 <img></img>而且没有 CSS 背景(我制作了 sprite)。

谢谢。

Answer 1

为什么不简单地在图像顶部显示 PNG？

您可以在图像之后在 HTML 中创建元素，也可以使用 JS 动态创建它。

只需创建一个 DIV 并将其绝对定位在您的图片之上，然后为其赋予与您的图片相同的宽度和高度(或您喜欢的任何内容)，并将您的 PNG 作为 div 的背景图片，这全部通过 CSS。

您还可以使用 CSS ::after 伪类来设置元素样式，甚至无需通过 HTML 或 JS 将其插入 DOM。

http://jsfiddle.net/LuSYQ/1/

还有 ::after 替代方案

http://jsfiddle.net/LuSYQ/11/