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

Question

我正在處理我的投資組合，並且我想用一個PNG掩蓋一些圖片，這與webkit圖像蒙版一起工作，但是，我希望在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/