È possibile creare una finestra trasparente usando HTML/JS/CSS?

Question

Ho bisogno di fare una finestra trasparente quando l'utente clicca in una determinata posizione dello schermo, qualcosa di simile:

E ', ho bisogno di evidenziare un'area arbitraria nella schermata (con larghezza e altezza fisse) nella posizione in cui l'utente fa clic.

ho due opzioni:

1. utilizzare un plugin per prendere screenshot (come these).
2. Creare 4 caselle in grigio.

non mi piace nessuna di queste opzioni per motivi diversi:

1. L'uso di questi plugin exceds mie esigenze e aggiunge un tempo di caricamento della pagina in più e la complessità indesiderate.
2. Gestire queste caselle potrebbe essere complesso in un futuro e la compatibilità del browser potrebbe essere un problema.

Quindi, la mia domanda è, c'è un modo per farlo in un modo semplice usando HTML (HTML5 e canvas è ok), CSS e Javascript/Jquery? Uno specifico plug-in di Jquery sarà un'opzione in quanto potrei dimenticare il mantenimento di questo codice.

Answer 1

ho fatto questo una volta, io non sono sicuro che tutti saranno d'accordo con la mia realizzazione, ma ha funzionato per me in quel momento:

Creare un div nella posizione che si desidera, impostare l'altezza e la larghezza (per effetto finestra) ; posiziona il div nel luogo che desideri e poi aggiungi un contorno.

body { 
 
    background-image: url(http://lorempixel.com/800/800/nature/5/); 
 
    background-size: cover; 
 
} 
 
.windowDiv { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    height: 300px; 
 
    width: 300px; 
 
    outline: 4000px solid rgba(0, 0, 0, 0.5); 
 
}

<div class="windowDiv"></div>

EDIT: utilizzo background-color piuttosto che opacità.

2 ° MODIFICA: come suggerito da A. Wolf, è necessario utilizzare il contorno anziché il bordo per facilitare il posizionamento.