代码添加/修改

通过后台只能设置一张背景图,但是我要设置多张背景图,就需要在网站文件中动手脚了。最初在后台设置的背景图,使用审查元素知道了文件名'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'即可解决图片超出或是显示不全的问题。

人物立绘分享

链接:https://pan.baidu.com/s/1lyisIuk6341i2WHL6pVl6w