如何在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。

更多信息（无关）：

如果你想添加更多的复杂的面具，你可以使用绝对格漂浮在你的画廊，一个透明的PNG背景。这将产生像掩蔽一样的闪光，例如，一个png淡出为白色，所以当浏览图库项目时它会产生一个很酷的效果。 （这是一个非常简单的例子）