子比主题 – 给文章页图片添加遮罩版权图片

飞流 · 发表于 2025-10-10 16:53:47

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题的文章页里面的图片加上遮罩图片效果，这个效果说实话就是一个装饰，鼠标指向图片之后图片右下角有一个版权图片可自己放自己的logo图片链接，话不多说直接开始！

tengfei_down - 2025-10-10T165316.362.webp

代码部署

直接将下面的代码丢到：子比主题–>>自定义javascript代码，把图片链接换成你自己的即可！

//文章内页增加图片遮罩开始
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('.article-content > .theme-box > .wp-block-image > img');
images.forEach(img => {
// 创建包裹容器
const wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.display = 'inline-block';
// 创建半透明遮罩
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
overlay.style.opacity = '0';
overlay.style.transition = 'opacity 0.3s ease';
// 创建右下角图标
const icon = document.createElement('img');
icon.src = '图片链接'; // 替换为实际图标路径
icon.style.position = 'absolute';
icon.style.width = '120px';//设置图片宽度
icon.style.height = '32px';//设置图片高度
icon.style.bottom = '15px';
icon.style.right = '15px';
//icon.style.filter = 'brightness(0) invert(1)'; // 使图标变白
// 组装元素
overlay.appendChild(icon);
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
wrapper.appendChild(overlay);
// 添加交互效果
wrapper.addEventListener('mouseenter', () => {
overlay.style.opacity = '1';
});
wrapper.addEventListener('mouseleave', () => {
overlay.style.opacity = '0';
});
});
});
//文章内页增加图片遮罩结束

复制代码

	爱是难逃：	07-23 18:52
	飞流：这论坛到底有没有资本给我投资一下啊！	07-20 22:07
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40