如何用JavaScript/JQuery将img的src设为CSS背景图URL？

API 探路者

2026-8-2

解决方案

你可以通过原生JavaScript或jQuery实现只在<img>标签中写一次图片地址，自动同步到父容器的background-image中，具体实现如下：

原生JavaScript 实现

第一步：调整CSS（预留渐变，移除硬编码的图片URL）

.same-image-div {
    width: 100%;
    margin: auto;
    padding: 60px 15px!important;
    /* 保留渐变层，图片URL部分先用透明占位，后续由JS替换 */
    background-image: linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url(transparent);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile-box-img{
    width: 50%;
    margin: auto;
    /* 若不需要显示img标签，可添加 display: none; */
}

第二步：添加原生JS代码（放在HTML底部或DOM加载完成事件中）

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取目标img元素
    const targetImg = document.querySelector('.user-profile-box-img');
    // 获取对应的背景容器
    const bgContainer = targetImg.closest('.same-image-div');
    // 获取img的src地址
    const imgUrl = targetImg.src;
    // 构造完整的background-image样式（保留渐变+动态图片URL）
    const bgStyle = `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url("${imgUrl}")`;
    // 给容器设置样式
    bgContainer.style.backgroundImage = bgStyle;
});

jQuery 实现

如果你已经引入jQuery库，代码会更简洁：

调整CSS（同原生方案的CSS代码）

添加jQuery代码

$(document).ready(function() {
    // 获取img的src地址
    const imgUrl = $('.user-profile-box-img').attr('src');
    // 直接给容器设置background-image
    $('.same-image-div').css('background-image', `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url("${imgUrl}")`);
});