jquery - 如何在 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 回退 like this one如果需要的话。此外，一些较旧的移动浏览器/旧 IE 不支持 position: fixed，因此还需要另一个 javascript 回退来将图像定位在视口(viewport)的中心。