配置手机 PC 页面白天黑夜共四个背景图

发布于 2022-03-01  824 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

直接动工 

复制下面css代码进去主题的style.css文件 或者 后台-自定义css ,修改文件中的图片改为自己的图片 例如: url(../img/beijing.jpeg); 改为 url(您的图片网址); 亦可用 api 取代单一图片

/*白天背景图*/
#centerbg {
  background: url(https://cbbkk.com/api/pc.php);
}
@media screen and (max-width:860px) {
#centerbg {
background: url(https://ccbbkk.com/api/mobile.php);
}
}
/*黑夜背景图*/
figure#centerbg {
  background: url(https://cbbkk.com/api/pc.php);
}
@media screen and (max-width:860px) {
figure#centerbg {
background: url(https://cbbkk.com/api/mobile.php);
}
}
figure#centerbg,#centerbg{
           background-attachment: local;
           background-position: center;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           background-repeat: no-repeat;
} 

亦可保存在自己的CSS文件中,在footer.php中引入

<link rel="stylesheet" defer="defer" href="../css/css.css" >

其他主题可根据 class 名称来适配自己的主题。。。

可以根据文章来建立自己的图片api https://cbbkk.com/547.html