使用 img src 作为背景图像答案

【问题标题】：Use img src as background-image使用 img src 作为背景图像
【发布时间】：2014-12-18 04:35:28
【问题描述】：

在使用媒体查询时，我正在尝试使用 img src 作为背景图像。

我的媒体查询在 max-width: 854px 时处于活动状态。

我正在使用 jQuery 进行尝试，但不起作用。

我的 jQuery：

$(document).ready(function () {
        if ($(window).width() <= 854) {
            $('a.class').css('background-image', 'url(' + $('a.class img').attr(src) + ')');
        }
    });

我做错了什么？

谢谢！

【问题讨论】：

您有一个名为src 的JavaScript 变量吗？如果有，价值是多少？如果不是，您确定不应该像.attr('src') 这样引用吗？
@mason 跟进 mason 的评论。你收到错误了吗？始终检查您的控制台
@mason 谢谢！我忘了把 src 放在引号之间！

标签： jquery html css media-queries

【解决方案1】：

用 jQuery 来做，你可能会想这样做：

$(document).ready(function () {
    if ($(window).width() <= 854) {
        $('a.class').each(function(){
            $(this).css('background-image', 'url(' + $(this).children('img').attr('src') + ')');
        });
    }
});

我使用了each 循环，因为我猜您可能有多个a.class，并且我对 src 属性使用引号。

【讨论】：

【解决方案2】：

改变

$('a.class').css('background-image', 'url(' + $('a.class img').attr(src) + ')');

到

$('a.class').css('background-image', 'url(' + $('a.class img').attr('src') + ')');

.attr 函数需要一个字符串。您需要引用该值，因为 src 是属性的名称。

如果您按照Juan 的建议检查浏览器控制台中的错误，您可能会发现这一点。或者，如果您查看 IDE 中突出显示的语法，您会注意到 src 的颜色类似于变量名而不是字符串值。

【讨论】：

【解决方案3】：

$('a.class').css('background-image', 'url(' + $('a.class img').attr("src") + ')');

"src" 必须在引号之间。

【讨论】：