为 html 创建透明蒙版

发布于 2024-09-18 08:38:09 字数 205 浏览 6 评论 0原文

有没有人遇到过模仿 Webkit

-webkit-mask-box-image: url(filename.png)

功能的有效方法？

我正在尝试使用非方形动画元素，并且希望不必在服务器端进行屏蔽。

我决定至少支持 Gecko 和 Webkit，但如果我能管理 Opera 和 IE，那就太好了。

原文

Has anyone come across an effective way to mimic Webkit's

-webkit-mask-box-image: url(filename.png)

functionality?

I'm trying to use non-square animated elements, and would prefer not having to do the masking on server-side.

I'm set on supporting at least Gecko and Webkit, but if I can manage Opera and IE, that would be a bonus.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三五鸿雁 2024-09-25 08:38:09

谷歌搜索很多，似乎目前除了 webkit 之外没有其他办法可以做到这一点。现在只需在 Photoshop 中预先遮盖图像即可:)

回复收藏 0 原文

余生再见 2024-09-25 08:38:09

将包含具有较高 z-index 的透明图像的 div 绝对定位在动画的顶部？

只是一个想法，可能对您的需要完全没用。

<div class="animation">
</div>
<div class="mas">
</div>

.animation{height: 200px; width: 200px; position: absolute; top: 0; left: 0;}
.mask{height: 200px; width: 200px; position: absolute; top: 0; left: 0; z-index: 10; background: transparent url('mask.png') 0 0 no-repeat;}

Put a div containing transparent images with higher z-index absolutely positioned over the top of the animations?

Just a thought, might be completely useless for what you need.

<div class="animation">
</div>
<div class="mas">
</div>

.animation{height: 200px; width: 200px; position: absolute; top: 0; left: 0;}
.mask{height: 200px; width: 200px; position: absolute; top: 0; left: 0; z-index: 10; background: transparent url('mask.png') 0 0 no-repeat;}

回复收藏 0 原文

~没有更多了~