Я хочу создать учебное пособие, которое приведет пользователя именно к тому, куда нужно щелкнуть. Я стараюсь , чтобы покрыть весь экран с <div>
которой тускнеет все элементы , кроме в конкретной области , которая находится в фиксированном width
, height
, top
и left
.
Проблема в том, что я не могу найти способ «отменить» родительский элемент background-color
(который также прозрачен).
В фрагменте ниже показан hole
div, который должен быть без него background-color
, включая его родительский.
Можно ли это вообще сделать? Любые идеи?
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}
<div id="bg">
<div id="hole"></div>
</div>
Вот макет того, чего я пытаюсь достичь: