代码添加/修改
通过后台只能设置一张背景图,但是我要设置多张背景图,就需要在网站文件中动手脚了。最初在后台设置的背景图,使用审查元素知道了文件名'header.php',然后用工具把该文件从数据控下载到本地并打开。
在'header'中新建一个叫数组赋值给$bg,用于存放图片地址、添加css样式,如果图片大小是一样的话,可以删掉'css'=>'自定义样式;'
这部分。
有了数组后,我想让每次刷新或切换页面都能随机切换图片,这里就要用到'rand'()和'count()'。'rand'随机生成数组其中一个,'count'则是返回数组长度,通常数组都是从'0'开始,所以需要-1,最后赋值给'$random'。
<?php
$bg = array(
array('img'=>'图片地址','css'=>'自定义样式'),
array('img'=>'图片地址','css'=>'自定义样式'),
array('img'=>'图片地址','css'=>'自定义样式'),
);
$random = rand(0, count($bg) - 1);
?>
我的图片是全部上传到了网站根目录下边,所以直接调用,外链的话直接替换掉即可。
然后再在文件内找到'body:before',将'background'中的图片地址修改为<?php echo $bg[$random]['img'] ?>
,在写上输出css的<?php echo $bg[$random]['css'] ?>
,到这里为博客添加背景图就算完成了。
<style>
body:before{
content:'';
display:block;
opacity:.5;
z-index:-1;
position:fixed;
top:0; bottom:0;
right:0;
<?php echo $bg[$random]['css'] ?>
background: url(<?php echo $bg[$random]['img'] ?>) center/cover no-repeat;}
</style>
图片超出
把修改好的文件上传到服务器中,发现图片是加载到了,但是有的图片则显示不完整。这里就需要后一步,将background: url(<?php echo $bg[$random]['img'] ?>) center/cover no-repeat;}
中的'cover'修改为'contain'即可解决图片超出或是显示不全的问题。
已有 4 条评论
我之前有个自己的随机 API,可现在我貌似被 TX 盯上了== 只要开了二次元相关的东西(壁纸、看板娘)都会说我站瑟情屏蔽掉==
当时换博客主题的时候,就想要这个效果,但是主题下载下来只能设置一个,就直接自己加了。
背景才是亮点啊~
保罗博客的背景都蛮不错的