如何在页面刷新时随机替换CSS body背景图片？

因为你现有代码是PHP动态输出的，用后端PHP生成随机图片路径是最优方案——不会有前端JS那种加载闪烁问题，完美适配你当前的代码结构。

步骤1：准备图片 #

把要随机展示的背景图都放到 <?php echo $wo['config']['theme_url'];?>/img/welcome/ 文件夹里，比如命名为 bg1.jpg、bg2.png、bg3.webp 这类清晰的名字。

步骤2：替换原有代码 #

直接替换你原来的<style>代码块为下面的PHP+CSS代码：

<style>
<?php
// 定义背景图所在的服务器本地路径
$bg_local_path = $_SERVER['DOCUMENT_ROOT'] . $wo['config']['theme_url'] . '/img/welcome/';
// 筛选出文件夹里的jpg/jpeg/png/webp格式图片（可根据你的文件格式调整）
$available_bg = glob($bg_local_path . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);

// 随机选一张，没有图片时 fallback 到原来的默认图
if (!empty($available_bg)) {
    $random_bg_filename = basename($available_bg[array_rand($available_bg)]);
    $bg_url = $wo['config']['theme_url'] . '/img/welcome/' . $random_bg_filename;
} else {
    $bg_url = $wo['config']['theme_url'] . '/img/welcome/background.png';
}
?>
body{
    background: url('<?php echo $bg_url;?>') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
</style>

代码说明 #

• glob 函数会自动匹配指定格式的图片，避免把文件夹里的非图片文件选进来
• array_rand 是PHP原生的随机数组元素函数，简单可靠
• 加了 fallback 逻辑：如果文件夹里没图片，会自动用原来的background.png，防止页面出错

备选：前端JS方案（不推荐，但适合特殊场景） #

如果因为某些原因不能改后端，也可以用JS实现，把下面的代码放到页面的</body>标签之前：

<script>
// 手动列出所有背景图的路径
const bgList = [
    '<?php echo $wo['config']['theme_url'];?>/img/welcome/bg1.jpg',
    '<?php echo $wo['config']['theme_url'];?>/img/welcome/bg2.png',
    '<?php echo $wo['config']['theme_url'];?>/img/welcome/bg3.webp'
];
// 随机选一张
const randomBg = bgList[Math.floor(Math.random() * bgList.length)];
// 设置body样式
const body = document.body;
body.style.background = `url('${randomBg}')`;
body.style.backgroundPosition = 'center';
body.style.backgroundRepeat = 'no-repeat';
body.style.backgroundSize = 'cover';
// 注意：这里的!important用JS不好直接加，如果原有样式优先级高，可能需要调整CSS权重
</script>

两种方案对比 #

• 后端PHP方案：页面加载时直接输出随机背景的CSS，没有闪烁，SEO友好，完全适配你的现有代码，优先选这个
• 前端JS方案：页面先加载默认样式，再替换背景，可能会有短暂闪烁，适合无法修改后端的场景

内容的提问来源于stack exchange，提问作者Stoosh