Chcę stworzyć tutorial, który poprowadzi użytkownika dokładnie, gdzie kliknąć. Staram się pokryć cały ekran z <div>
którego będzie przyciemnić wszystkie elementy z wyjątkiem określonym regionie , który jest w stałym width
, height
, top
i left
.
Problem w tym, że nie mogę znaleźć sposobu na „anulowanie” rodzica background-color
(co również jest przezroczyste).
Na poniższym wycięciu hole
znajduje się div, który powinien być bez żadnego background-color
, w tym jego rodzica.
Czy można to w ogóle osiągnąć? Jakieś pomysły?
#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>
Oto przykładowy obraz tego, co próbuję osiągnąć: