JS网页加上水印背景

最新推荐文章于 2024-07-15 11:46:17 发布

唐立彤

最新推荐文章于 2024-07-15 11:46:17 发布

阅读量462

点赞数

分类专栏： ECMAScript

本文链接：https://blog.csdn.net/tanglitong/article/details/106554353

版权

本文介绍如何利用JavaScript在网页上动态添加水印背景，包括文字水印和图片水印的实现方法，覆盖全屏且不影响页面内容展示，适用于各种浏览器。

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

export const WaterMark = (settings) => {
    //默认设置
    let 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//水印倾斜度数
    };
    Object.assign(defaultSettings, settings);
    let oTemp = document.createDocumentFragment();
    //获取页面最大宽度
    let p_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
    let cutWidth = p_width * 0.0150;
    let page_width = p_width - cutWidth;
    //获取页面最大高度