0
249
Views¿Atenuar toda la pantalla excepto un área fija?
Quiero crear un tutorial que lleve al usuario exactamente a dónde hacer clic. Estoy tratando de cubrir toda la pantalla con un <div> que atenuará todos los elementos, excepto una región específica que tiene un width , height , top y left fijos.
El problema es que no puedo encontrar una manera de "cancelar" el background-color de los padres (que también es transparente).
En el recorte a continuación, el hole es el div que se supone que no tiene ningún background-color , incluido el de su padre.
¿Se puede lograr esto en absoluto? ¿Algunas ideas?
#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>Aquí hay una imagen de maqueta de lo que estoy tratando de lograr:
3 answers
Answer question0
Podrías hacerlo con solo un div y darle una box-shadow .
EDITAR: como señaló @Nick Shvelidze, debería considerar agregar pointer-events: none
Se agregó valor vmax para box-shadow como sugirió @Prinzhorn
div { position: fixed; width: 200px; height: 200px; top: 50px; left: 50px; /* for IE */ box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for real browsers */ box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); pointer-events: none; } <div></div>0
Puede crear un SVG que se llene con una ruta que tenga el orificio donde lo necesita. Pero supongo que necesita encontrar una manera de manejar los clics, ya que todos ellos estarán dirigidos al svg superpuesto. Creo que document.getElementFromPoint puede ayudarte aquí. mdn
0
Esto también se puede hacer de manera similar a la respuesta de @VilleKoo, pero con un borde.
div { border-style: solid; border-color: rgba(0,0,0,.3); pointer-events: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-width: 40px 300px 50px 60px; } <div></div>