jQuery 如何在 html 页面上水印/叠加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9935161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to watermark/overlay image on an html page?
提问by Random
Is it possible to somehow watermark an html page with a semi-transparent image that still lets through user interaction on the page behind it? Contradictory, and doesn't seem possible without some complicated scripting, but maybe I'm missing something.
是否有可能以某种方式使用半透明图像为 html 页面添加水印，该图像仍然允许用户在其后面的页面上进行交互？矛盾，如果没有一些复杂的脚本似乎不可能，但也许我错过了一些东西。
回答by Aaron
This will work for most modern browsers:
这适用于大多数现代浏览器：
div#watermark {
position: fixed;
width: 100%;
height: 100%;
z-index: 99999;
background: url('path/to/image.png') center center no-repeat;
pointer-events: none;
}
Unfortunately, IE doesn't recognize the pointer-eventsproperty, so you need to use a javascript fallback like this oneif needed. Also, some older mobile browsers/old IE don't support position: fixed, so that'll also require another javascript fallback to position the image in the center of the viewport.
不幸的是，IE 无法识别该pointer-events属性，因此如果需要，您需要使用像这样的 javascript 回退。此外，一些较旧的移动浏览器/旧 IE 不支持position: fixed，因此还需要另一个 javascript 回退来将图像定位在视口的中心。
回答by user1302302
Try this:
尝试这个：
#watermark {
background-image: url('watermark.png');
repeat: no-repeat;
opacity: 50;
position: relative;
bottom: 0;
float: left;
}
