Come filigrana/sovrapporre l'immagine su una pagina html?

Question

È possibile in qualche modo filigranare una pagina html con un'immagine semitrasparente che consente comunque l'interazione dell'utente nella pagina dietro di esso? Contraddittorio, e non sembra possibile senza alcuni script complicati, ma forse mi manca qualcosa.

Answer 1

Questo funziona per la maggior parte dei browser moderni:

div#watermark { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: 99999; 
    background: url('path/to/image.png') center center no-repeat; 
    pointer-events: none; 
} 

Purtroppo, IE non riconosce la proprietà pointer-events, quindi è necessario utilizzare un ripiego javascript like this one se necessario. Inoltre, alcuni vecchi browser per dispositivi mobili/vecchio IE non supportano position: fixed, quindi sarà necessario un altro fallback javascript per posizionare l'immagine al centro del viewport.

Answer 2

Prova questo:

#watermark { 
    background-image: url('watermark.png'); 
    repeat: no-repeat; 
    opacity: 50; 
    position: relative; 
    bottom: 0; 
    float: left; 
}