Как сделать полупрозрачный блок с дырой в центре?

Question

[Endru]

Добрый день. Подскажите как можно реализовать следующую задачу :
Пытаюсь реализовать на сайте- на адаптивной карте- на верхнем слое прозрачный блок с "дыркой по середине".
Т.е. что-бы по центру карту было видно нормально, а в остальных местах что-бы ее перекрывал полупрозрачный блок и на этом блоке поместить текстовую информацию. И что-бы это все дело было адаптивно. Карта сейчас у меня адаптивная. Как можно сделать так?
Если не понятно написал, вот примерно так хочу сделать

Answer 1

[Андрей Гончаров]

На самом деле не все тривиально. Нам нужно с одной стороны сохранить интерактивность карты, с другой сделать респонсивную полупрозрачную рамку.
Для сохранения интерактивности карты не подойдет использовать один элемент с широкой обводкой, т.к. события мыши будут активны на нем, а не на карте. Поставив этому элементу pointer-events: none, мы потерям возможность выделения текста и копирования контактной инфы, которая будет распологаться на этой рамке.

Вывод нужно сделать 4 элемента по одному на каждую сторону маски, чтобы центр был активным для карты, однако задача ослажняется респонсивом с прозрачной маской. С левым и правым краем все понятно: высота 100% и ширина допустим 200px, верхний и нижний край должны быть высотой допустим 200px а вот ширину надо вычислять скриптами, т.к. если поставим 100% то полупрозрачности наложатся и получится некрасиво. Ширину вычислисть скриптом по принципу: ширина = ширина.окна - 400px в нашем случае

Comments

[Евгений Петров]

Для работы сквозь слой существует pointer-events

[Андрей Гончаров]

Проблему, связанную с ним я описал. Если выделение текстовой инфы на рамках не критично, то первый вариант самый простой да.

[Евгений Петров]

Вы посмотрели все возможные значения? Специально для вас обновил пример

[GreatRash]

Евгений Петров: В вашем примере вместо того, чтобы выделять текст на тёмном фоне юзер будет двигать карту.

[Андрей Гончаров]

codepen.io/anon/pen/yNOqXG - вот вроде должно быть так

Answer 2

[Евгений Петров]

Используем box-shadow во избежание переполнения. Пример

Comments

[Endru]

Все класс, но как написал ниже Андрей Гончаров , нужно сохранить интерактивность карты. А блок получается перекрывает ее и не дает взаимодействовать.

[Евгений Петров]

EndruAN: Обновил пример для вас и для него. Неужели сложно почитать спецификацию?)

[Андрей Гончаров]

Вероятно про разные вещи мы думаем, но для pointer-events существует в данном случае лишь 2 состояния: auto и none. Остальные значение SVG only - у вас же по ссылке и написано

[Александр Зачиналов]

Евгений, как всегда самый дальновидный ответ. Плюсую

[Евгений Петров]

Андрей Гончаров: Вы откройте пример, что ходить вокруг да около? Клик только за пределами блока. Внутри выделяйте текст, кликайте, сколько нужно.

[Андрей Гончаров]

Евгений Петров: так там задача же чтобы на полях текст был, а центр как бы прозрачный и взаимодействовал с картой, которая сзади. А у вас в примере, центр прозрачный просто визуально и находится по z-index выше остальных.

[Endru]

Евгений Петров Подскажите, в моем примере как возможно реализовать, что-бы внутри блока была возможность взаимодействия с картой, а вне блока такая возможность отсутствовала? Это все в том же направлении копать ? codepen.io/endruan/pen/YXqjKw

[Андрей Гончаров]

EndruAN: в таком случае вам понадобится эту рамку делать из 4-х элементов, как я описал ниже.

[Евгений Петров]

Андрей Гончаров: Видимо, да — о разном. Хотя с другими значениями pointer-events, вроде, вопросов нет?)

Нужно всего лишь выяснить — а как будет располагаться этот блок с информацией по краям? Хочу понять, как можно вырезать дырку в тексте с учётом адаптивной вёрстки?)
В любом случае, эта задача решается теми же средствами.

[Евгений Петров]

EndruAN: Вы покажите, как будете текст формировать вокруг этой области, и тогда будет решение.

[Андрей Гончаров]

Евгений Петров: я если честно так и не понял, что вы имеете ввиду под другими значениями poiner-events. Да другие значения есть, но они для svg only и в данном случае нас никак не касаются. А задача тс решается, я убежден, только с помощью четырех элементов - по одному на каждую сторону маски.

[Endru]

Евгений Петров: Возможно я в вопросе не четко указал что нужно. Вообщем делаю страницу с контактами. Есть контейнер фоном которого должна быть карта, в этом контейнере вначале по центру будет идти контактная информация, телефон, адрес. А ниже в центре блока должна быть уже эта так называемая "дыра" с возможностью в этом месте пользователю взаимодействовать с картой.

[Endru]

Андрей Гончаров: Ну если другого варианта не найдется, буду пробовать делать по вашему методу, блоками.

[Андрей Гончаров]

EndruAN: codepen.io/anon/pen/yNOqXG - вот тут реализовал, для респонсива правда может надо будет допилить

[Endru]

Андрей Гончаров: Спасибо, то что нужно. Если дальше не поплывет в верстке, будет отлично.

Answer 3

[Михаил Горячкин]

Вот так.