空间设计网站wordpress判断用户是否登录
今天需要在某小程序提交一些证明材料,然后处于隐私保护的需要,在每个材料上都加上了水印。
下面是给在线网站添加水印的办法。
1.打开需要添加水印的页面
2.输入水印生成代码
打开控制台界面,输入以下代码,然后回车
// 水印配置参数
const config = {count: 60, // 水印数量angle: 45, // 旋转角度范围fontSize: '14px', // 字体大小color: '#cccccc', // 文字颜色opacity: 0.5, // 透明度zIndex: 999 // 层叠顺序
};// 创建单个水印元素
function createWatermark() {const watermark = document.createElement('div');watermark.textContent = "仅供招聘申请驿站使用";watermark.style.cssText = `position: fixed;left: ${Math.random() * 100}%;top: ${Math.random() * 100}%;transform: rotate(${config.angle}deg);transform-origin: center center;color: ${config.color};font-size: ${config.fontSize};opacity: ${config.opacity};pointer-events: none;white-space: nowrap;z-index: ${config.zIndex};`;return watermark;
}// 批量创建水印
for (let i = 0; i < config.count; i++) {document.body.appendChild(createWatermark());
}
// 水印配置参数
const config = {count: 20, // 水印数量angle: 45, // 统一倾斜角度fontSize: '14px', // 字体大小color: '#cccccc', // 文字颜色opacity: 0.5, // 透明度zIndex: 999, // 层叠顺序spacing: 200 // 水印间距(像素)
};// 创建单个水印元素
function createWatermark() {const watermark = document.createElement('div');watermark.textContent = "仅供招聘申请驿站使用";watermark.style.cssText = `position: fixed;transform: rotate(${config.angle}deg);transform-origin: center center;color: ${config.color};font-size: ${config.fontSize};opacity: ${config.opacity};pointer-events: none;white-space: nowrap;z-index: ${config.zIndex};user-select: none;`;// 计算有效显示区域(考虑水印尺寸)const viewportWidth = window.innerWidth - 200; // 预留水印宽度const viewportHeight = window.innerHeight - 50; // 预留水印高度// 生成随机位置(确保在可视区域内)watermark.style.left = `${Math.random() * viewportWidth}px`;watermark.style.top = `${Math.random() * viewportHeight}px`;return watermark;
}// 批量创建水印
function createWatermarks() {// 清除旧水印document.querySelectorAll('[data-watermark]').forEach(el => el.remove());for (let i = 0; i < config.count; i++) {const watermark = createWatermark();watermark.dataset.watermark = 'true'; // 标记水印元素document.body.appendChild(watermark);}
}// 初始化水印
createWatermarks();// 窗口变化时重新生成
window.addEventListener('resize', createWatermarks);
3.展示效果
其他页面同理,此处不再赘述。