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

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.mfbz.cn/a/602596.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

最新闲鱼小众蓝海虚拟资源,单号日入300+,三天必起店,矩阵放大月入1-2W

详情介绍 本项目售卖的虚拟资源非常小众&#xff0c;宅男的最爱&#xff0c;并且市场一片蓝海&#xff01;只需一步手机&#xff0c;随时随地操作项目&#xff0c;流量巨大&#xff0c;安装教程方法操作三天必起店&#xff0c;消息多到回不过来&#xff0c;一天轻松出个大几十单…

数字孪生涉及到的前沿技术:虚拟现实 人工智能 区块链 边缘计算。

数字孪生是各类技术的综合应用&#xff0c;除了咱们常见的传感器、数据采集、清洗、传输、建模、可视化技术外&#xff0c;还有还有一些前沿技术&#xff0c;会让数字孪生更加强大和智能&#xff0c;本文介绍几个。 虚拟现实&#xff08;Virtual Reality&#xff0c;VR&#x…

搜维尔科技:【案例分享】Xsens用于工业制造艺术创新设计平台

用户名称&#xff1a;北京理工大学 主要产品&#xff1a;Xsens MVN Awinda惯性动作捕捉系统 在设计与艺术学院的某实验室内&#xff0c;通过Xsens惯性动作捕捉&#xff0c;对人体动作进行捕捉&#xff0c;得到人体三维运动数据&#xff0c;将捕到的数据用于后续应用研究。…

【影片欣赏】【指环王】【魔戒:双塔奇谋 The Lord of the Rings: The Two Towers】

2003年发行&#xff0c;Special Extended DVD Edition Part One 1. The Foundations of Stone 2. Elven Rope 3. The Taming of Smeagol 4. The Uruk-hai 5. The Three Hunters 6. The Burning of the Westfold 7. Massacre at the Fords of Isen 8. The Banishment of Eomer …

stable diffusion 之云端部署攻略

本文主要介绍stable diffusion云端产品以及使用步骤 ℹ️整合安装包、模型资源见文末~ megaease cloud&#xff08;强烈推荐&#xff09; 优点&#xff1a; 集成了常用大模型和插件、VAE3080显卡配置&#xff0c;费用大概0.48元/小时&#xff0c;可随时暂停&#xff0c;暂停…

图片如何压缩到500kb以下?3步完成图片压缩

在日常生活和工作中&#xff0c;经常需要处理各种图片&#xff0c;而有时候图片文件过大&#xff0c;不仅占用了大量的存储空间&#xff0c;还可能影响文件的传输速度和加载速度。因此&#xff0c;如何将图片压缩到500kb以内成为了许多人的需求&#xff0c;普通的图片压缩可能没…

如何在没有备份的情况下恢复 Mac 上丢失的数据

如果您因意外删除、错误格式化硬盘或文件损坏而丢失了重要的、感伤的文件、照片或音乐&#xff0c;那么这可能会令人非常痛苦。幸运的是&#xff0c;您有几个选择。 您的 Mac 位于数字宇宙的中心。您可能会在上面留下照片和视频形式的记忆&#xff0c;以及来自您不再见面的朋友…

Ubuntu16.04 离线安装CDH6.2.1

1. 离线包工作 下载Cloudera Manager安装包&#xff0c;地址&#xff1a;https://archive.cloudera.com/cm6/6.2.1/repo-as-tarball/ cm6.2.1-ubuntu1604.tar.gz下载CDH6.2.1安装包&#xff0c;地址&#xff1a;https://archive.cloudera.com/cdh6/6.2.1/parcels/ CDH-6.2.1-1.…

IP 地址追踪工具促进有效的 IP 管理

网络 IP 地址空间的结构、扫描和管理方式因组织的规模和网络需求而异&#xff0c;网络越大&#xff0c;需要管理的 IP 就越多&#xff0c;IP 地址层次结构就越复杂。因此&#xff0c;如果没有 IP 地址管理&#xff08;IPAM&#xff09;解决方案&#xff0c;IP 资源过度使用和地…

Java面试八股文(SpringCloud篇)

****************************************************

数据分析:小红书夏季情绪营销,已经到了“next level”

导语 5月伊始&#xff0c;夏季营销拉开帷幕。盘点品牌近两年出圈案例&#xff0c;夏季营销的立足点正在从提供功能性向渲染情绪转变。 2023年&#xff0c;蕉下《所有的太阳》&#xff0c;将防晒与风景、山水链接&#xff0c;重新定位了「防晒衣」的角色&#xff0c;从躲避炙热…

阿里云VOD视频点播流程(1)

一、开通阿里云VOD 视频点播&#xff08;ApsaraVideo VoD&#xff0c;简称VOD&#xff09;是集视频采集、编辑、上传、媒体资源管理、自动化转码处理、视频审核分析、分发加速于一体的一站式音视频点播解决方案。登录阿里云&#xff0c;在产品找到视频点播VOD &#xff0c;点击…

Davinci工程CAN模块讲解

CAN模块是用来配置CAN Driver的&#xff0c;里面有CanConfigSet是用来配置驱动内容的&#xff0c;CanGeneral配置参数。涉及四个文件Can_Lcfg.c/Can_Lcfg.h/Can_Cfg.c/Can_Cfg.h CanConfigSet CanControllers CAN控制器&#xff0c;我们这里的CAN控制器只有一个&#xff0c;名…

ETCD 简介

ETCD 简介 1-etcd介绍 etcd 是 CoreOS 团队于 2013 年 6 月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。具有以下特点&#xff1a; 简单&#xff1a;安装配置简单&#xff0c;而且提供了 HTTP API 进行交互&#xff0c;使用也很简单键…

Duplicate File Finder Pro for Mac激活版:重复文件清理软件

在繁杂的文件管理中&#xff0c;你是否曾为重复文件而烦恼&#xff1f;Duplicate File Finder Pro for Mac&#xff0c;正是你不可或缺的得力助手。这款专业级工具&#xff0c;能够迅速扫描并定位Mac系统中的重复文件&#xff0c;让你的存储空间恢复清爽。 通过强大的算法支持&…

AOF持久化是怎么实现的?

AOF持久化是怎么实现的&#xff1f; AOF 日志三种写回策略AOF 重写机制AOF 后台重写总结参考资料 AOF 日志 试想一下&#xff0c;如果 Redis 每执行一条写操作命令&#xff0c;就把该命令以追加的方式写入到一个文件里&#xff0c;然后重启 Redis 的时候&#xff0c;先去读取这…

如何利用AI提高内容生产效率

目录 一、自动化内容生成 二、内容分发与推广 三、内容分析与优化 图片来源网络&#xff0c;侵权联系可删 一、自动化内容生成 随着AI技术的飞速发展&#xff0c;自动化内容生成已经成为提高内容生产效率的重要手段。AI可以通过自然语言处理&#xff08;NLP&#xff09;、机…

【经验总结】Vue2中的全局变量(store

需求场景 需要在vue中存储一个可变的&#xff0c;可读写的全局变量在不同的js、页面中均可调用和读写 技术&#xff1a;使用vue的store 用法总结 一、定义变量 1、找到vue的/src/store路径&#xff0c;在modules文件夹下创建文件&#xff08;这里便于测试创建demo.js&…

2024年融资融券利率最新变化,又降低了?

最近有很多朋友在问我问融资融券的业务&#xff0c;都是比较关心这个利率的问题。确实&#xff0c;做融资融券最重要的利率&#xff0c;利率低会节省很大一笔资金&#xff0c;今天在这边给大家对接一个上市券商&#xff0c;可以给到大家万一的交易佣金和5%的融资利率&#xff0…

Redis快速学习

Redis快速学习 一、 Redis快速入门1.1 初始Redis1.1.1 Redis的存储方式1.1.2 NoSQL 与 sql 之间的区别 1.2 Redis概述1.2.1 Redis是什么1.2.2 Redis有什么用1.2.3 Redis的特性 1.3 Redis安装测试1.3.1 Redis Linux安装 1.4 Redis测试工具1.5 Redis的基本知识 二、Redis的五大数…