如何在 HTML 对象上创建遮罩？
我在苹果网站上看到了他们的大图片库，在此链接中（例如）：
http://www.apple.com/imac/。 apple.com/imac/
吸引我眼球的是他们对这些图像进行了某种屏蔽，这样它们就不会显示在图库框之外。在 flash/as3 中，屏蔽一个对象非常简单 - 但他们是如何在网络中做到这一点的呢？
它是如何运作的？
I have seen in the apple site their big-images gallery in this link (for example):
What attracted my eyes was that they sort-of masked these images so they will not be displayed outside the gallery box. In flash/as3 it is quite simple to mask an object - but how did they do it in the web?
How does it work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
通常是通过将图像作为 div 的背景来完成的。这个div有隐藏的溢出，背景图像在它的中心。 div 中有一个 img 元素，它是一个透明的 png，可以用作遮罩。
Well it's often done by making the image the background of a div. This div has hidden overflow, and the background image is centered in it. Within the div theres a img element which is a transparant png that can be used as the mask.
该画廊由一个宽页面组成，其中包含所有图像，并根据画廊的父元素进行定位。父元素上设置了
overflow:hidden，以便超出边缘的位被切断。为了推进这一目标，他们使用了一些 JavaScript，可以将画廊向一个方向滑动，从而将新区域带入视野。The gallery consists of one wide page with all the images in it, positioned with regard to the gallery's parent element. The parent element has
overflow: hiddenset on it, so that the bits which extend beyond the edges are cut off. To advance it, they have some JavaScript which slides the gallery one direction, bringing new areas into view.您可以使用带有
overflow:hidden属性的 div。更多信息（不相关）：
如果您想添加更复杂的蒙版，您可以使用浮动在画廊上的绝对 div，并具有透明的 png 背景。这将创建类似遮罩的闪光，例如淡出为白色的 png，因此当滚动浏览图库项目时，它将创建一个很酷的效果。 （这是一个非常简单的例子）
You can use a div with an
overflow:hiddenproperty.More info (unrelated):
If you want to add more complex mask you can use absolute div floating over your gallery, with a transparent png background. This will create flash like masking e.g. a png that fades out to white, so when scrolling through the gallery items it will create a cool effect. (this is a very simple example)