¿Cómo filtrar/superponer imagen en una página html?

Question

¿Es posible marcar de alguna manera una página html con una imagen semitransparente que aún permite la interacción del usuario en la página detrás de ella? Es contradictorio, y no parece posible sin algunas secuencias de comandos complicadas, pero tal vez me falta algo.

Answer 1

Esto funcionará para la mayoría de los navegadores modernos:

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

Por desgracia, IE no reconoce la propiedad pointer-events, por lo que es necesario utilizar un repliegue Javascript like this one si es necesario. Además, algunos navegadores móviles anteriores/IE viejos no son compatibles con position: fixed, por lo que también se requerirá otra alternativa de javascript para colocar la imagen en el centro de la ventana gráfica.

Answer 2

Prueba esto:

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