gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:52:02 27 4
gpt4 key购买 nike

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

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

谢谢。

最佳答案

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

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

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

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

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

还有 ::after 替代方案

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

关于html - JavaScript 中的 CSS webkit-image-mask 替代方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6252233/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com