ماقالە يوللاش一لوفىېر بىلوگى

ئالتۇن ئەزالىق

پۈتۈن بېكەت بايلىقىغا ئېتىبار بېرىپ سېتىۋېلىش
قىسمەن مەزمۇنلار ھەقسىز
بىرگە بىر تېخنىكا جەھەتتىن يېتەكلەش
ۋىپ ئابۇنىتلىرى مەخسۇس QQ توپى

ئالتۇن ئەزالىق

ئالماس ئەزالىق

بارلىق مەزمۇنلار ئىتىبار قىلىنىدۇ
قىسمەن مەزمۇنلار ھەقسىز
ئالاھىدە مۇلازىمەت ۋە ئۇچۇر تەمىنلەيمىز
كود ياردەملىشىپ قۇرۇش ۋە مەسىلە تۈزۈتۈپ بىرىش

ئالماس ئەزالىق

مەقالە تۇرى

خەتكۈچ

مەزمۇن خەتكۈچ يېزىڭ، پەش ئارقىلىق ئايرىپ يېزىڭ !

欢迎访问لوفىېر بىلوگى

ماختاش سۆزلىرى

//文章内页增加图片遮罩开始 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 = 'https://xjbilog.com/wp-content/uploads/2025/09/knockout.png'; // 替换为实际图标路径 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'; }); }); }); //文章内页增加图片遮罩结束