js给HTML页面生成文字水印

最新推荐文章于 2024-07-23 02:57:05 发布

热心网友大熊

最新推荐文章于 2024-07-23 02:57:05 发布

阅读量303

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CameronAnderson/article/details/110230764

版权

本文介绍如何利用JavaScript在HTML页面上添加文字水印，覆盖在页面内容之上，增强网页的版权保护和个性化设计。通过设置水印的位置、角度、颜色等属性，可以实现不同风格的水印效果。

摘要由CSDN通过智能技术生成

//生成水印
watermark({ watermark_txt: data[0].HTMC });        



//js给html生成水印
        function watermark(settings) {
            //默认设置
            var defaultSettings = {
                watermark_txt: "text",
                watermark_x: 20,//水印起始位置x轴坐标
                watermark_y: 20,//水印起始位置Y轴坐标
                watermark_rows: 20,//水印行数
                watermark_cols: 20,//水印列数
                watermark_x_space: 100,//水印x轴间隔
                watermark_y_space: 50,//水印y轴间隔
                watermark_color: '#aaa',//水印字体颜色
                watermark_alpha: 0.4,//水印透明度
                watermark_fontsize: '15px',//水印字体大小
                watermark_font: '微软雅黑',//水印字体
                watermark_width: 210,//水印宽度
                watermark_height: 80,//水印长度
                watermark_angle: 15//水印倾斜度数
            };
            //采用配置项替换默认值，作用类似jquery.extend
            if (arguments.length === 1 && typeof arguments[0] =