注意这个教程是全站的如果想个别页面可以使用单独页面加载javascript的方法

首先
注意新版本大概率是要添加到全站的css因为新的mediawiki（本站目前1.39+）对于css有更多安全要求。

/* Common.css */
body {
    background-image: url('https://cn.bing.com/th?id=OHR.BiodiverseCostaRica_EN-US2611109244_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4');
    background-repeat: no-repeat;
    background-size: cover;
}

上面这个可能让你看不清页面原生的一些字因为背景的原因，所以我应用了一个模糊滤镜，以实现毛玻璃效果。你可以根据需要更改颜色、透明度和模糊程度。
同样这种“backdrop-filter”样式在其他页面是使用不了的，大概率是要添加到全站。

.mw-body {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}

请注意，backdrop-filter属性目前在所有浏览器中都不完全支持，因此这种方法可能不会在所有浏览器中都有效。

/* Common.js */
$(document).ready(function() {
    $('body').css('background-image', 'url(https://cn.bing.com/th?id=OHR.BiodiverseCostaRica_EN-US2611109244_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4)');
});

效果图还是有不兼容的

暗色模式你设置的背景也不会变，可以直接写一个js判断我就不写了。

滤镜也挡住另外一个图片元素了。

解决“backdrop-filter”办法用其他类似代码做。
使用了一个伪元素来创建一个模糊的背景图像，并在内容区域上方添加了一个半透明的白色遮罩，以实现类似毛玻璃的效果。您可以根据需要更改背景图片、模糊程度和遮罩颜色。
ps：效果要差一些。

.mw-body {
    position: relative;
}

.mw-body:before {
    content: "";
    background-image: url('https://example.com/background.jpg');
    filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#content {
    background-color: rgba(255, 255, 255, 0.5);
}