为随机背景图片脚本添加独立background-position设置的实现咨询

核心思路是将图片文件名与对应的位置信息绑定为一组关联数据，随机选取时同时获取这两个值，再同步设置到目标元素上，以下提供两种实用实现方式：

方式一：脚本内直接绑定位置（内联式） #

把原有的图片数组改造为对象数组，每个对象同时存储图片名和对应的background-position值：

<script>
    const dir = 'wp-content/themes/Stoq/home-images/';
    // 用对象数组关联每张图的文件名和背景位置
    const bgImages = [
        { imgName: "1.jpeg", position: "center center" },
        { imgName: "2.jpeg", position: "left top" },
        { imgName: "3.jpeg", position: "right bottom" },
        { imgName: "4.jpeg", position: "center top" },
        { imgName: "5.jpeg", position: "center bottom" },
        { imgName: "6.jpeg", position: "left center" },
        { imgName: "7.jpeg", position: "right center" },
        { imgName: "8.jpeg", position: "20% 30%" },
        { imgName: "9.jpeg", position: "80% 60%" },
        { imgName: "10.jpeg", position: "center center" },
        { imgName: "11.jpeg", position: "left bottom" },
        { imgName: "12.jpeg", position: "right top" },
        { imgName: "13.jpeg", position: "10% 90%" },
        { imgName: "14.jpeg", position: "90% 10%" },
        { imgName: "15.jpeg", position: "center center" }
    ];
    // 随机选取一组数据
    const randomIndex = Math.floor(Math.random() * bgImages.length);
    const selectedBg = bgImages[randomIndex];
    const targetElement = document.getElementById("random-bkg-img");
    // 同步设置背景图和位置
    targetElement.style.backgroundImage = `url(${dir}${selectedBg.imgName})`;
    targetElement.style.backgroundPosition = selectedBg.position;
</script>

这种方式直接在脚本中定义位置规则，修改和维护直观，适合位置固定、无需与CSS解耦的场景。

方式二：通过CSS类绑定位置（解耦式） #

如果希望样式逻辑由CSS统一管理，可先定义位置类，再在脚本中关联图片与类名：

首先在CSS中添加位置类：

.bg-pos-center { background-position: center center; }
.bg-pos-left-top { background-position: left top; }
.bg-pos-right-bottom { background-position: right bottom; }
/* 根据需求扩展其他位置类 */

然后修改脚本，用对象数组关联图片名和对应的CSS类：

<script>
    const dir = 'wp-content/themes/Stoq/home-images/';
    const bgImages = [
        { imgName: "1.jpeg", posClass: "bg-pos-center" },
        { imgName: "2.jpeg", posClass: "bg-pos-left-top" },
        { imgName: "3.jpeg", posClass: "bg-pos-right-bottom" },
        // 补充剩余12张图片的类名关联
    ];
    const randomIndex = Math.floor(Math.random() * bgImages.length);
    const selectedBg = bgImages[randomIndex];
    const targetElement = document.getElementById("random-bkg-img");
    // 清除旧的位置类（避免多个类冲突）
    targetElement.classList.remove(...bgImages.map(item => item.posClass));
    // 添加当前选中的位置类，设置背景图
    targetElement.classList.add(selectedBg.posClass);
    targetElement.style.backgroundImage = `url(${dir}${selectedBg.imgName})`;
</script>

这种方式将样式与脚本逻辑分离，后续调整位置只需修改CSS，无需改动脚本，更符合前端开发的分离原则。

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