遮罩动画GIF-使用Jquery或其他工具是否可能？

Question

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

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

对于我而言，当前但不是理想的解决方案是使用具有单独的具有透明性的低帧GIF的Flash作为移动设备的后备设备，但很想知道您是否对使用适用于移动设备和台式机的Jquery或其他非Flash解决方案有任何建议。

考虑的想法：-在方形GIF动画上方叠加类似alpha的png，例如png的星空图通过动画显示动画-Flash是最简单，最快的方法，但在可能的情况下尽量避免使用Flash-制作整个GIF动画时最好使用哑光色的透明度的背景

也许Flash是最好的解决方案-但只要有一个我想念的东西就可以发送这个问题，我肯定是这样。

感谢您考虑这一点。

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

Answer 1

<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。

最重要的是，您的load mask.png带有需要的表单的透明区域。

其他方式：

<div style="background-image: url('animated.gif');"><img src='mask.png'></div>

Answer 2

您想阅读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的演示示例