Jak znak wodny/nakładka obrazu na stronie html?

Question

Czy można w jakiś sposób oznaczyć znak wodny stroną html za pomocą półprzezroczystego obrazu, który nadal umożliwia interakcję użytkownika ze stroną za nim? Sprzeczne i nie wydaje się możliwe bez skomplikowanych skryptów, ale może czegoś brakuje.

Answer 1

To będzie pracować dla większości nowoczesnych przeglądarek:

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

Niestety, IE nie rozpoznaje właściwość pointer-events, więc trzeba użyć javascript fallback like this one razie potrzeby. Ponadto, niektóre starsze przeglądarki mobilne/stary IE nie obsługują position: fixed, więc będą również wymagać kolejnego zastępstwa javascript, aby umieścić obraz w centrum okna podglądu.

Answer 2

Spróbuj tego:

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