Как я могу создать маску для объекта HTML?

Question

Я видел на яблочном сайте их галерею больших изображений по этой ссылке (например):

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

Что привлекло мое внимание, так это то, что они как бы маскировали эти изображения, чтобы они не отображались за пределами окна галереи. В flash / as3 довольно просто замаскировать объект - но как они это сделали в сети?

Как это работает?

Answer 1

Галерея состоит из одной широкой страницы со всеми изображениями в ней, расположенной относительно родительского элемента галереи. На родительском элементе установлено overflow: hidden, поэтому биты, которые выходят за границы, обрезаются. Чтобы продвинуть его, у них есть некоторый JavaScript, который перемещает галерею в одном направлении, открывая новые области.

Answer 2

Ну, это часто делается, делая изображение фоном div. Этот div имеет скрытое переполнение, и фоновое изображение центрируется в нем. Внутри div есть элемент img, представляющий собой прозрачный png, который можно использовать в качестве маски.

Answer 3

Вы можете использовать div со свойством overflow:hidden.

Дополнительная информация (не имеет отношения):

Если вы хотите добавить более сложную маску, вы можете использовать абсолютный div с плавающей над вашей галереей с прозрачным фоном png.Это создаст вспышку, похожую на маску, например, png, которая исчезнет до белого, поэтому при прокрутке элементов галереи это создаст крутой эффект.(это очень простой пример)