Как сделать прямоугольную дырку в диве?

Question

[Vady85]

Здравствуйте! Есть див, который перекрывает всё содержимое сайта полупрозрачным черным цветом. Как сделать прямоугольное "окно" в диве, если известны top, left, right, bottom? Т.е. чтобы содержимое сайта в "окне" отображалось естественным цветом.
Вот сам див:

<style>
div.tutor {
	position:fixed;
	z-index:500;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#000;
	opacity:0.7;

}	
	</style>

Comments

[Шохрух Шаймардонов]

покажите лучше как должно получиться (картинкой)

[Vady85]

Вот так примерно.

[Aleksandr Ataakgayev]

По-моему проще вынести этот участок в отдельный див, тот который не тёмный, и настроить z-index

Answer 1

[Олег]

Вот варик пришел на ум ;)

Comments

[Ankhena]

Только я бы упростила все эти псевдо с абсолютами и сделала просто фон диву

div{
  width:300px;
  height:300px;
  background: linear-gradient(rgba(0, 0, 0, .5) 30%, transparent 30%, transparent 70%,rgba(0, 0, 0, .5) 70%), 
  linear-gradient(to left,rgba(0, 0, 0, .5) 30%, transparent 30%, transparent 70%,rgba(0, 0, 0, .5) 70%) no-repeat center / 100% 40%;
}

https://jsfiddle.net/8kyfs5d4/1/

Answer 2

[xmoonlight]

Только 4-мя областями (напр., дивами) по периметру: 2 продольных (сверху и снизу) и 2 поперечных (слева и справа).

Answer 3

[Aetae]

Можно clip-path, можно filter(matrix преобразующий альфу для конкретного цвета), можно mix-blend-mode.
Можно не вырезать дырку, а просто сделать div с очень большой полупрозрачной тенью, border или outline...
Можно использовать несколько background-image.
Ну или тупо 4 блока, как предложил xmoonlight .

Answer 4

[Максим]

Это примерно так ...надо иметь в разметке блок который будет рядом с блоком который может иметь на него влияние либо вызывать событие mousemove на javascript

Ну и разумеется что z-index (любое позиционирование кроме static )который отобразит блок выше чем тот самый overlay

На css это делается так: