如何在HTML对象上创建蒙版？

Question

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

http://www.apple.com/imac/

吸引我眼球的是他们对这些图像进行了掩饰，因此它们不会显示在画廊框外。在flash / as3中，屏蔽对象非常简单 - 但他们是如何在网络中完成的？

它是如何运作的？

Answer 1

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

Answer 2

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

Answer 3

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

更多信息（无关）：

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