Есть ли способ сделать полупрозрачный div с динамически размещаемыми "дырками"

Question

Я создаю страницу с 2 слоями: слой изображения и слой «маски» поверх него, который является полупрозрачным. Я хочу динамически поместить маленькую прямоугольную «дыру» в эту маску, чтобы исходное изображение под ней можно было увидеть в этой области.

Возможно ли это?

Конечная цель а состоит в том, чтобы создать эффект затененного изображения, при котором указатель мыши над определенными горячими областями становится более ярким. К сожалению, эти области не являются последовательными, и не так просто создать div для дополнения.

Спасибо! Amit

Answer 1

Как-то так?

http://deepliquid.com/projects/Jcrop/demos.php

Answer 2

ОК, вот одно решение, которое я нашел. Создайте div обертки с относительным позиционированием (чтобы поймать абсолютное позиционирование горячих областей). Поместите изображение в нижний слой. Поместите полупрозрачный div на средний слой. Поместите все эти div-области «горячей области» («отверстия») в верхний слой (абсолютное позиционирование), без фона (полностью прозрачный). Затем для псевдокласса горячих областей: hover, используйте фоновое изображение так же, как изображение в нижнем слое, и установите для фоновой позиции значение -left -top (отрицание абсолютной позиции элементов div).

Это создаст желаемый эффект, то есть серое изображение, при котором часть исходного изображения отображается при наведении курсора на «горячую область».

Моя единственная надежда состоит в том, что он не влияет на производительность браузера при настройке фонового позиционирования изображения 400К на таком количестве дел (у меня их около 50) ..