给文章内页的图片内容添加一个遮罩并显示logo图片-只对img标签生效-多图片也是生效的

//文章内页增加图片遮罩开始
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';
    });
  });
});
//文章内页增加图片遮罩结束

使用教程：