子比主题 – 给文章页图片添加遮罩版权图片
这是一款子比主题的文章页里面的图片加上遮罩图片效果，这个效果说实话就是一个装饰，鼠标指向图片之后图片右下角有一个版权图片可自己放自己的logo图片链接，话不多说直接开始！代码部署
直接将下面的代码丢到：子比主题–>>自定义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';
});
});
});
//文章内页增加图片遮罩结束
页:
[1]