利用CSS为网站添加透明渐变效果的背景图,以及如何用 Typecho-Plus 来简化这一步骤,实现快速切换单页的背景图,以及随机背景图的设计思路
知道改变单页背景图的方法后,我们还可以利用 Typecho 的魔术代码,来实现页面随机背景图的功能:
!!!
<script>
var rndimg = [
["https://img.clso.fun/file/b19580254a1f59a7db2cc.jpg", "50%", "0%"],
["https://img.clso.fun/file/6060ba5c3811903abc7b0.jpg", "0%", "0%"],
["https://img.clso.fun/file/7d15cc7d5d4b638d03c60.jpg", "0%", "0%"],
["https://img.clso.fun/file/c183ecf444eb28dffcd63.jpg", "50%", "15%"],
["https://img.clso.fun/file/b6ba88ef41991817800ff.jpg", "10%", "0%"],
["https://img.clso.fun/file/99f0ccea84f3a7436841f.jpg", "50%", "20%"],
["https://img.clso.fun/file/a2381098a9c740722aa51.jpg", "0%", "0%"],
];
function rndwp(){
var rnd = rndimg[Math.floor(Math.random()*rndimg.length)];
var rndurl = rnd[0];
var left = rnd[1] ? rnd[1] : "0%";
var top = rnd[2] ? rnd[2] : "0%";
document.body.style.background = "linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6)), url('"+rndurl+"') no-repeat "+left+" "+top+" fixed";
}
rndwp();
</script>
!!!
刷新本页,或者单击这里,背景图将随机显示!(没反应是随机到了相同的图……)本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。