当前位置: > mediawiki知识 > 给你的mediawiki(公民皮肤)添加一个背景

给你的mediawiki(公民皮肤)添加一个背景

公子猫1年前 (2023-06-20)mediawiki知识457

注意这个教程是全站的如果想个别页面可以使用单独页面加载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);
}

转载需要注明来源。

标签: mediawiki

相关文章

mediawiki修复使用图片预览无法加载问题

mediawiki修复使用图片预览无法加载问题

一般情况下不正常情况下解决办法来了把站点升级成https就好了。可能是部分浏览器不能正常加载https和http混合站点导致的。注意不止部署ssl还要修改LocalSettings.php配置...