页面添加水印效果实现

news2024/10/2 8:37:24

页面效果:

在这里插入图片描述

源代码:

<div id="water-wrapper"></div>
<div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>

jquery版本

function water() {
    const watermarkText = '水印文字123'; // 水印文字内容
    const wrap = document.querySelector('#water-wrapper');
    const html = document.querySelector('html');
    const body = document.querySelector('body');
    html.style.margin = "0"
    html.style.padding = "0"
    body.style.margin = "0"
    body.style.padding = "0"
    wrap.style.width = "100vw"
    wrap.style.height = "100vh"
    wrap.style.display = "flex"
    wrap.style.position = "absolute"
    wrap.style.zIndex = "999999"
    wrap.style.flexDirection = "row"
    wrap.style.justifyContent = "space-around"
    wrap.style.flexWrap = "wrap"
    wrap.style.pointerEvents = "none"
    wrap.style.fontSize = "16px"
    wrap.style.color = "rgba(184, 184, 184, 0.6)"
    wrap.style.overflow = "hidden"

    const wrapWidth = wrap.offsetWidth; // 容器的宽度
    const wrapHeight = wrap.offsetHeight; // 容器的高度

    const tempSpan = document.createElement('span');
    tempSpan.innerText = watermarkText;
    tempSpan.style.visibility = 'hidden';
    document.body.appendChild(tempSpan);
    const watermarkWidth = tempSpan.getBoundingClientRect().width + 160; // 水印文本的实际宽度
    const watermarkHeight = tempSpan.getBoundingClientRect().height + 120; // 水印文本的实际高度
    document.body.removeChild(tempSpan);

    const numCols = Math.floor(wrapWidth / watermarkWidth); // 计算每行可容纳的方格数量
    const numRows = Math.floor(wrapHeight / watermarkHeight); // 计算可容纳的行数

    for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numCols; j++) {
            const watermark = document.createElement('div');
            watermark.classList.add('watermark');
            watermark.innerText = watermarkText;
            watermark.style.padding = "60px 80px"
            watermark.style.transform = "rotate(-45deg)"
            watermark.style.transformOrigin = "center center"
            wrap.appendChild(watermark);
        }
    }
}
water()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1241411.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

非遗之光:十八数藏柏松数字保护的璀璨之路

随着数字技术的崛起&#xff0c;非物质文化遗产的保护进入了一个新的纪元。在这个时代的先锋中&#xff0c;十八数藏以其对传统工艺的数字保护而独领风骚。这是一条璀璨之路&#xff0c;通过数字技术的应用&#xff0c;为传统工艺注入了新的活力。 十八数藏柏松将数字创新融入传…

哈希表-set、map

当需要判断一个元素是否在集合中时&#xff0c;就使用哈希法 散列表&#xff08;Hash table&#xff0c;也叫哈希表&#xff09;&#xff0c;是根据键&#xff08;Key&#xff09;而直接访问在内存存储位置的数据结构。 哈希表中关键码就是数组的索引下标&#xff0c;然后通过…

【django+vue】连接数据库、登录功能

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【djangovue专栏】 1.【djangovue】项目搭建、解决跨域访问 【djangovue】连接数据库、登录功能 django连接数据库1.安装MySQL驱动程序2.创建数据库3.配置settings.py文件4.创建表5.添加数据 登录功能1.django实现…

sql语法大全

1&#xff0c;创建数据库 create database 数据库名字; 2,查看所有的数据库名称 show databases; MySQL服务器已有4个数据库&#xff0c;这些数据库都是MySQL安装时自动创建的。 information_schema 和 performance_schema 数据库分别是 MySQL 服务器的数据字典&#xff08;…

【2021集创赛】基于ARM-M3的双目立体视觉避障系统 SOC设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;上海电力大学 队伍名称&#xff1a;骇行队 总决赛奖项&#xff1a;二等奖 1.摘要 随着信息技术的发展&#xff0c;AGV&#xff08;Automated Guided Vehic…

状态设计模式是什么?什么是 State 状态设计模式?Python 状态设计模式示例代码

什么是 State 状态设计模式&#xff1f; 状态设计模式是一种行为型设计模式&#xff0c;它允许一个对象在其内部状态发生改变时改变其行为&#xff0c;使其看起来好像改变了其类。状态模式主要解决的问题是&#xff1a;当一个对象的行为取决于它的状态&#xff0c;并且在运行时…

如何写好科研论文

写好科研论文需要遵循以下步骤&#xff1a; 确定研究主题和目标&#xff1a;在开始撰写论文之前&#xff0c;你需要明确你的研究主题和目标。这有助于你更好地组织论文的内容&#xff0c;并确保你的论文能够准确地传达你的研究成果。做好文献调研&#xff1a;在撰写论文之前&a…

集团投融资大数据平台解决方案

一、项目背景 项目为集团型公司大数据平台项目&#xff0c;整个项目周期约为6个月&#xff0c;整体呈现了对外的数据大屏驾驶仓和对内的看板报表&#xff0c;减少了客户内部数据上报和报表制作的重复工作量&#xff0c;为集团数据决策奠定基础。 二、项目目标 战略层&#xff…

.net framework4.0框架下winform 实现寄宿式web api

首先Nuget中下载包&#xff1a;Microsoft.AspNet.WebApi.SelfHost&#xff0c;如下&#xff1a; 注意版本哦&#xff0c;最高版本只能4.0.30506能用。 1.配置路由 public static class WebApiConfig{public static void Register(this HttpSelfHostConfiguration config){// …

echarts 实时刷新图表

2023.11.23今天我学习了如何对echarts图表进行实时刷新&#xff0c;如&#xff1a;一分钟刷新一次&#xff0c;或是五分钟刷新一次。 代码如下&#xff1a; <template><div ref"bar" style"width:200px;height:200px"/> </template>&l…

电商API接口|电商数据接入|拼多多平台根据商品ID查商品详情SKU和商品价格参数

随着科技的不断进步&#xff0c;API开发领域也逐渐呈现出蓬勃发展的势头。今天我将向大家介绍API接口&#xff0c;电商API接口具备独特的特点&#xff0c;使得数据获取变得更加高效便捷。 快速获取API数据——优化数据访问速度 传统的数据获取方式可能需要经过多个中介环节&…

【开源】基于JAVA的在线课程教学系统

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

office 365企业版安装教程

1.下载所需工具&#xff08;防火墙和防毒软件记得关闭&#xff09; 下载链接&#xff1a;所需文件 2.安装激活office 1.安装 office tool plus 2.已安装过office 先进行office的移除&#xff0c;再进行未安装office的步骤进行 3.未安装过office 1.设置部署 按照以下来进行安…

【MATLAB源码-第85期】基于farrow结构的滤波器仿真,截止频率等参数可调。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 Farrow结构是一种用于实现可变数字滤波器的方法&#xff0c;尤其适用于数字信号处理中的采样率转换和时变滤波。它通过多项式近似来实现对滤波器系数的平滑变化&#xff0c;使得滤波器具有可变的群延时或其他参数。 Farrow结…

详解——菱形继承及菱形虚拟继承

目录 一&#xff0c;菱形继承 1.1单继承 1.2多继承 1.3菱形继承 1.4菱形继承的问题 1.5虚拟继承解决数据冗余和二义性的原理 二.继承的总结和反思 一&#xff0c;菱形继承 C三大特性——继承-CSDN博客 1.1单继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继…

【HarmonyOS】 低代码平台组件拖拽使用技巧之登录组件

【关键字】 HarmonyOS、低代码平台、组件拖拽、登录组件、代码编辑器 1、写在前面 前面我们介绍了低代码中堆叠容器、滚动容器、网格布局、页签容器以及一些常用容器和组件的拖拽使用方法&#xff0c;本篇我们来介绍一个新的组件&#xff0c;这个组件是属于业务组件——登录组…

WPF实战项目十六(客户端):备忘录接口

1、新增IMemoService接口&#xff0c;继承IBaseService接口 public interface IMemoService : IBaseService<MemoDto>{} 2、新增MemoService类&#xff0c;继承BaseService和IMemoService接口 public class MemoService : BaseService<MemoDto>, IMemoService{pub…

毕业设计ASP.NET 1400动漫公司网站【程序源码+文档+调试运行】

摘要 本系统将实现一个动漫公司网站&#xff0c;包括前台用户模块和后台管理员模块。前台用户模块主要包括最新动漫、注册登录、公司简介、公司新闻、动漫中心、联系我们和会员中心等功能。后台管理员模块包括用户管理、公司简介管理、公司新闻管理、动漫类别管理、动漫管理、…

快速上手Banana Pi BPI-M4 Zero 全志科技H618开源硬件开发开发板

Linux[编辑] 准备[编辑] 1. Linux镜像支持SD卡或EMMC启动&#xff0c;并且会优先从SD卡启动。 2. 建议使用A1级卡&#xff0c;至少8GB。 3. 如果您想从 SD 卡启动&#xff0c;请确保可启动 EMMC 已格式化。 4. 如果您想从 EMMC 启动并使用 Sdcard 作为存储&#xff0c;请确…

阿里云服务器ECS产品知识及购买和使用常见问题及答案汇总

本文总结了阿里云用户在购买和使用阿里云服务器中的一些常见的问题&#xff0c;包括什么是云服务器ECS&#xff0c;特性与优势&#xff0c;应用场景&#xff0c;基本概念&#xff0c;使用限制等众多问题&#xff0c;让您全方位了解阿里云服务器&#xff0c;并根据自己的需求选择…