html网页中如何添加水印网页添加水印核心css样式pointer-events: none;并提供一个快速添加文字水印

添加水印的核心是去除鼠标事件，让水印浮于最顶层的同时，不影响网页的正常操作。因此我们只需要在水印组件的样式中添加 pointer-events: none; 属性即可实现该操作。

示例如下：

<body>
    <div id="ag">
        <b>这是水印</b>
        <input placeholder="水印中的输入框" />
    </div>
    <div>这是正文内容,可以被选中操作</div>
</body>

<style>
    #ag {
        /* 核心样式 */
        pointer-events: none;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        /* 其它样式 */
        background: #000;
        color: red;
        opacity: 0.5;
    }
</style>

代码效果：

可以看到即使我们在水印中添加了一个input框，也无法影响我们对底层正文的任何操作。

添加文字水印

如果你只是想添加文字水印，可以使用下面这个方法：

function textWaterMark() {
        var name = "文字水印内容";
        var opacity = 0.2; //水印透明度
        var w = 200; //水印宽度
        var h = 200; //水印高度
        var r = -30;//水印角度（建议：-60度到60度之间）
        var fontSize = 15;//字体大小

        var genWater = function (name) {
            var waterCanvas = document.createElement('canvas');
            waterCanvas.id = 'water-canvas';
            waterCanvas.setAttribute('width', w);
            waterCanvas.setAttribute('height', h);
            var ctx = waterCanvas.getContext('2d');
            ctx.rotate(Math.PI /180 * r);
            ctx.font = fontSize+'px serif';
            if(r>=0){
                ctx.fillText(name, fontSize, fontSize);
            }else{
                ctx.fillText(name, fontSize, h);
            }
            
            var base64Url = waterCanvas.toDataURL();
            var waterMarkDiv = document.createElement('div');
            var styleStr = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none;background-image:url(' + base64Url + ');opacity: ' + opacity + ';';
            waterMarkDiv.setAttribute('style', styleStr);
            waterMarkDiv.classList.add('__wm');
            return waterMarkDiv;
        };
        var container = document.body;
        var waterMarkDiv = genWater(name);
        container.insertBefore(waterMarkDiv, container.firstChild);

        var callback = function (record) {
            for (var i = 0; i < record.length; i++) {
                var item = record[i];
                var target = item.target;
                if (target.nodeType === 1) {
                    var removedNodes = item.removedNodes;
                    if (target.nodeName === 'BODY' && removedNodes.length > 0) {
                        for (var j = 0; j < removedNodes.length; j++) {
                            var element = removedNodes[j];
                            if (element.nodeType === 1 && element.nodeName === 'DIV' && element.classList.contains('__wm')) {
                                waterMarkDiv = genWater(name);
                                container.insertBefore(waterMarkDiv, container.firstChild);
                            }
                        }
                    }
                    var type = item.type;
                    if (target.nodeName === 'DIV' && target.classList.contains('__wm') && type === 'attributes') {
                        container.removeChild(waterMarkDiv);
                    }
                }
            }
        };
        if (typeof MutationObserver === 'function') {
            var obs = new MutationObserver(callback);
            var options = {
                childList: true,
                attributes: true,
                subtree: true,
                characterData: true
            };
            obs.observe(container, options);
        }
    }