创建禁止操作区域并且添加水印

css 设置 :

 引用换成自己就好 

.overlay {z-index: 1000;cursor: none; /*设置为不可点击*/user-select: none; /*设置为不可选择*/contenteditable: false; /*设置为不可编辑*/draggable: false; /*设置为不可拖动*/position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.16);pointer-events: none;/* 为了让水印居中,可以使用 flex 布局 */display: flex;justify-content: center;align-items: center;}.overlay:before {content: "禁止操作"; /* 这里是水印的文本内容 */color: #ffffff; /* 文字颜色 */font-size: 7em; /* 文字大小,根据需要调整 */opacity: 0.5; /* 文字透明度,可以根据需求调整 */text-align: center;/* 下面的定位属性可以根据需要调整水印的位置 */position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* 添加这一行来使文字竖直排列 */writing-mode: vertical-rl;}.disabled-element {/*opacity: 0.6; !* 降低透明度,表示不可用 *!*/pointer-events: none; /* 禁止鼠标事件 */}

还有一个 添加两个 文字的  自行选择  :

.overlay {z-index: 1000;cursor: none;user-select: none;contenteditable: false;draggable: false;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);pointer-events: none;display: flex;justify-content: center;align-items: center;
}.overlay:before,
.overlay:after { /* 修改这里,同时定义 :before 和 :after */position: absolute; /* 只需在其中一个伪元素中定义,这里我放在了 :before 中 */left: 50%;top: 50%;transform: translate(-50%, -50%);color: #ffffff;text-align: center;white-space: nowrap; /* 防止文本换行 */
}.overlay:before {content: "禁止操作";font-size: 3em;opacity: 0.5;
}.overlay:after {content: "版权保护"; /* 第二个水印文本 */font-size: 2em; /* 可以调整第二个水印的字体大小 */opacity: 0.6; /* 可以调整第二个水印的透明度 *//* 如果需要调整第二个水印的位置,可以通过修改 left/top 或者使用 margin 来实现 */
}

js 代码 禁止操作 :

 var id = $('#id');if (id.length > 0) {id.css({"position": "relative", 'cursor': 'none'}).append("<div class='overlay'></div>");tableDiv1.find('*').not('.overlay').each(function () {$(this).prop('disabled', true).addClass('disabled-element');});}//  这个段是 我在多处调用了 但是 我只想运行一次 所以添加了 这个 运行一次之后 直接给空 可用可不用 notOperable = function () {};

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

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

相关文章

git bash退出vim编译模式

解决方法&#xff1a; 1.按esc键&#xff08;回到命令模式&#xff09; 此时是没有分号让我们在后面输入命令的 2.按shift键: 3.再输入&#xff1a;wq&#xff0c;并按enter键 此时我们发现又回到git bash窗口 希望对大家有所帮助&#xff01;

JavaScript学习—网络请求

在 JavaScript 中&#xff0c;XMLHttpRequest 对象是一个用于与服务器交换数据的接口&#xff0c;允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。 方法 open()&#xff1a;用于设置请求的类型、URL和是否异步处理请求。 var xhr …

数据库-脏读

脏读&#xff08;Dirty Read&#xff09;是数据库并发控制中的一个概念&#xff0c;指的是一个事务读取了另一个尚未提交的事务的修改。由于另一个事务的修改可能最终会被撤销&#xff08;即发生回滚操作&#xff09;&#xff0c;因此&#xff0c;当前事务读取到的数据可能是“…

一览函数式编程

文章目录 一、 什么是函数式编程1.1 编程范式1.1.1 命令式编程(Imperative Programming)范式1.1.2 声明式编程(Declarative Programming)范式1.1.3 函数式编程(Functional Programming)范式1.1.4 面向对象编程(Object-Oriented Programming)范式1.1.5 元编程(Metaprogramming)范…

ThinkPHP5.1 创建控制器类

在ThinkPHP中&#xff0c;控制器是MVC模式中的核心组件之一&#xff0c;负责接收用户请求并处理相应的业务逻辑。在本篇技术博客中&#xff0c;我们将深入探讨ThinkPHP5.1中的控制器操作&#xff0c;包括创建控制器、路由绑定、请求参数获取等方面的知识点。 1.创建控制器 在T…

(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

前言 系统学习web漏洞挖掘以及项目实战也有一段时间了,发现在漏洞挖掘过程中难免会碰到一些历史漏洞,来帮助自己或是提高自己挖洞和及时发现漏洞效率,于是开始创建这个专栏,对第一时间发现的1day以及历史漏洞进行复现,来让自己更加熟悉漏洞类型以及历史漏洞,方便自己在后续的项…

商家制作微信小程序有什么好处?微信小程序的制作有哪些步骤和流程

微信小程序全面指南 微信小程序是微信生态系统中一项革命性的功能&#xff0c;为希望与庞大的微信用户群体互动的企业提供了独特的融合便捷性和功能性的体验。本全面指南深入探讨了微信小程序的世界&#xff0c;强调了其重要性、工作原理以及实际用例&#xff0c;特别是针对企…

开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

随着互联网的快速发展&#xff0c;传统的招聘方式已经不能满足企业和求职者的需求。为了提高招聘效率&#xff0c;降低招聘成本&#xff0c;越来越多的人开始关注人才招聘小程序、在线招聘平台。分享一个人才招聘小程序源码及搭建&#xff0c;让招聘更加高效便捷。系统是运营级…

windows安装ElasticSearch以及踩坑

1.下载 elasticsearch地址&#xff1a;Past Releases of Elastic Stack Software | Elastichttps://www.elastic.co/cn/downloads/past-releases#elasticsearch IK分析器地址&#xff1a;infinilabs/analysis-ik: &#x1f68c; The IK Analysis plugin integrates Lucene IK…

VS2022快捷键修改

VS2022快捷键修改 VS2022快捷键修改 VS2022快捷键修改

c++笔记——概述运算符重载——解析运算符重载的难点

前言:运算符重载是面向对象的一个重要的知识点。我们都知道内置类型可以进行一般的运算符的运算。但是如果是一个自定义类型&#xff0c; 这些运算符就无法使用了。那么为了解决这个问题&#xff0c; 我们的祖师爷就在c中添加了运算符重载的概念。 本篇主要通过实例的实现来讲述…

网络网络层之(4)IPv4协议

网络网络层之(1)IPv4协议 Author: Once Day Date: 2024年4月4日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的…

数据结构-线性表-应用题-2.2-8

已知在一维数组A[mn]中依次存放两个线性表&#xff08;a1,a2,a3,...am&#xff09;和&#xff08;b1,b2,b3,...bm&#xff09;编写一个函数&#xff0c;将数组中的两个顺序表的位置互换&#xff0c;即将&#xff08;b1,b2,b3,...bm&#xff09;放在&#xff08;a1,a2,a3,...am&…

python 关键字(in)

9、in 在Python中&#xff0c;in关键字是一个强大的工具&#xff0c;用于检查一个元素是否存在于某个序列&#xff08;如列表、元组、字符串等&#xff09;或集合&#xff08;如集合、字典的键&#xff09;中。 基础小白知识&#xff1a;in的基本用法 1.1 在序列中检查元素 …

JAVASE复习之多线程

多线程 1 多线程入门1.1 多线程的创建方式1.1.1 继承Thread方式1.1.2 实现Runable方式 1.2 Thread类中常用方法 1 多线程入门 1.1 多线程的创建方式 1.1.1 继承Thread方式 基本步骤&#xff1a; 创建一个类继承Thread类。在类中重写run方法&#xff08;线程执行的任务放在这…

《QT实用小工具·五十九》随机图形验证码,带有一些可人的交互与动画

1、概述 源码放在文章末尾 该项目实现了可交互的动画验证码控件&#xff0c;趣味性十足&#xff1a; 字符变换动画 噪音动画 可拖动交互 项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef CAPTCHAMOVABLELABEL_H #define CAPTCHAMOVABLELABEL…

线程池前世今生及源码实现

文章目录 ⭐前序一、是什么(what)功能构成 二、为什么(why)三、何处(where)四、何时(when)五、谁(who)六、怎么样(how)实践和性能调优策略线程池源码&#xff08;Code&#xff09;[待补充] ⭐前序 本文讲什么&#xff1a; 线程池的概念、工作原理、优势、实际应用中的使用场景…

VMware虚拟机提示内存不足

VMware虚拟机&#xff0c;k8s集群搭建内存不足的问题 疑问&#xff1a;我的电脑是8G8G双通道的内存&#xff0c;当我在搭建k8s集群时给master-2G内存&#xff0c;node1-3G内存&#xff0c;node2-3G内存&#xff1b; 当依次打开虚拟机到node2时VM提示“物理内存不足&#xff0c;…

【win32_004】系统配置信息、HIWORD宏、打印系统配置信息

文章目录 1. 获取系统度量或系统配置信息2. 格式化文本输出到图形输出3. HIWORD宏 1. 获取系统度量或系统配置信息 函数介绍 int WINAPI GetSystemMetrics(_In_ int nIndex);2. 格式化文本输出到图形输出 #mermaid-svg-RJl99A670ndu7R9k {font-family:"trebuchet ms&quo…

【busybox记录】【shell指令】cut

目录 内容来源&#xff1a; 【GUN】【cut】指令介绍 【busybox】【cut】指令介绍 【linux】【cut】指令介绍 使用示例&#xff1a; 关于参数的特殊说明&#xff1a; 打印行中选定部分 - 输出每行的第n-m个字节 打印行中选定部分 - 输出每行的第n-m个字符 打印行中选定…