0

我想知道是否有人对如何为网站屏蔽动画 GIF 电影提出建议。

示例： - 方形动画循环 GIF 电影（就像您在http://iwdrm.tumblr.com/看到的那样） - 类似 alpha 通道的蒙版，例如星形 - 动画背后是一张照片（不是纯色） - 结果：相反看到方形动画，您会看到星形动画，您可以在其中看到星形蒙版后面的背景

当前，但对我来说并不理想的解决方案是使用带有透明低帧 GIF 的 Flash 作为移动设备的后备方案，但很想知道您是否对使用 Jquery 或其他适用于移动设备和桌面的非 Flash 解决方案有任何建议。

考虑的想法： - 在方形 GIF 动画上方覆盖类似 alpha 的 png，例如 png 的星形剔除通过它显示动画 - Flash，这是最简单和最快的，但尽可能避免使用 Flash - 将整个 GIF 动画制作成最好的透明度和哑光颜色的背景

也许 Flash 是最好的解决方案 - 但只是将这个问题发送出去以防万一我错过了一些我确定是这样的情况。

感谢您考虑这一点。

期待听到任何想法，谢谢！

4

2 回答 2

2 
<div style='possition: absolute; z-index:0;'><img src='animated.gif'></div>
<div style='possition: absolute; z-index:1;'><img src='mask.png'></div>

这样的想法呢？顺便说一句，可以在没有 DIV 的情况下使用相同的逻辑，只需使用 IMG

在 BG 上，你有你的动画 gif。

最重要的是，您的加载 mask.png 具有您需要的透明区域。

另一种方式：

<div style="background-image: url('animated.gif');"><img src='mask.png'></div>
于 2012-05-08T06:43:12.763 回答
1

您想阅读Jeff Croft 的文章以了解有关如何在网络上使用透明图像的许多想法。文章本身强调了 PNG 图像的可能性，但演示的技术也可以将 GIF 图像用作背景。

这个干净的示例使用 HTML + CSS 进行图像屏蔽：

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">
  <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
    alt="CTA, a photo by Jeff Croft" />
  <img class="mask" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png" 
    alt="Mask" />
</a>

然后是 CSS：

a.photo-container {
  position: relative;
  display: block;
} 
img.mask {
  position: absolute;
  top: 0;
  left: 0;
}

这是一个带有蒙版动画 GIF的演示示例

于 2012-05-08T07:01:28.073 回答