如何在html页面上添加水印/叠加图像？

Question

是否有可能以某种方式为具有半透明图像的html页面添加水印,该图像仍然允许用户在其后面的页面上进行交互？矛盾,没有一些复杂的脚本似乎不可能,但也许我错过了一些东西.

Answer 1

这适用于大多数现代浏览器:

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

不幸的是,IE无法识别该pointer-events属性,因此如果需要,您需要使用像这样的javascript后备.此外,一些较旧的移动浏览器/旧IE不支持position: fixed,因此还需要另一个javascript后备将图像定位在视口的中心.