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

Question

[sergey]

Собственно, вот скрин

необходимо блок что выделен border-ом сделать прозрачным (типа как окно в блоке...).
Не приложу ума как это реализовать?

Есть фон с background - комната с окном, есть фон абсолютно спозиционированый, с opacity, и есть в этом фоне прозрачная область... вот как ее сделать прозрачной?

UPD
Вот как это в оригинале дизайнер изобразил

Answer 1

[Serj-One]

Красные - блоки
Синие - псевдоэлементы.
С мужиком - пустой блок без фона.

Comments

[sergey]

завихривато однако, но гуд идея

Answer 2

[Neyury]

Один из вариантов реализации, это установить у этого блока фон, аналогичный основному и спозиционировать его

Возможно вам потребуется такое свойство как
background-attachment: fixed;
Оно устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.

Comments

[sergey]

не совсем понял что вы имели ввиду

[Neyury]

SM: Сделать штатными средствами дыру в блоке невозможно.

В данном случае я предлагаю поставить блоку-дыре фон с окном, и будет казаться что он сквозной.
Для этого может потребоваться свойство "background-attachment: fixed;"

[sergey]

Neyury: при адаптивности этот вариант мне кажется не сработает, но благодарю за идею

[sergey]

Neyury: кроме того я не показал вам всех элементов, там будут инструменты и человек, который как бы выглядывает из этой рамы..., то есть очевидно что он под ней

[sergey]

Neyury: как вариант это поставить картинкой этот фон, уже с вырезом

Answer 3

[loins]

Для тех кто всё ещё ищет решение:
Берёте картинку в формате PNG с альфаканалами там где вам нужно, а дальше код по типу данного:
background: rgba(0, 0, 0, 0) url("[ссылка на файл]") no-repeat left;