如何在 HTML 对象上创建掩码？答案

【问题标题】：How can I create a mask on an HTML Object?如何在 HTML 对象上创建掩码？
【发布时间】：2011-07-04 08:47:21
【问题描述】：

我在苹果网站的这个链接中看到了他们的大图片库（例如）：

吸引我的地方是，它们对这些图像进行了某种屏蔽，因此它们不会显示在画廊框外。在 flash/as3 中，屏蔽对象非常简单 - 但他们是如何在 Web 中做到这一点的？

它是如何工作的？

【问题讨论】：

【解决方案1】：

通常是通过将图像作为 div 的背景来完成的。这个div有隐藏溢出，背景图片居中。在 div 中有一个 img 元素，它是一个透明的 png，可以用作遮罩。

【讨论】：

实际上，如果您查看他们的源代码，就会发现图像使用 IMG 标签放置在 HTML 5 图形元素内部。然后他们使用 JavaScript 使用绝对定位将图形滑动到位。

【解决方案2】：

画廊由一个包含所有图像的宽页面组成，相对于画廊的父元素定位。父元素上设置了overflow: hidden，因此超出边缘的位被切断。为了推进它，他们有一些 JavaScript 可以将画廊向一个方向滑动，从而带来新的区域。

【讨论】：

【解决方案3】：

您可以使用带有overflow:hidden 属性的div。

更多信息（不相关）：

如果您想添加更复杂的蒙版，您可以使用绝对 div 浮动在您的画廊上，并带有透明的 png 背景。这将创建像遮罩一样的闪光，例如淡出为白色的 png，因此在滚动图库项目时会产生很酷的效果。（这是一个非常简单的例子）

【讨论】：