Question

嗨，希望你能提供帮助。我的JavaScript并不热，我尝试过搜索但没有运气找到正确的方法。

我正在尝试将css background-image添加到div（.jumbotron），但根据屏幕大小动态更改网址。图像将从https://unsplash.it中拾取，其中网址可以编码为所需的尺寸，即 https://unsplash.it/200/300

<script type="text/javascript">
function setBackground () {
    $('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height(); + '/' + $(window).width();')');
}
</script>

我希望这有意义并提前感谢

Answer 1

假设jumbotron是一个id或类，请确保给它一个选择器标记。

你可以做这样的事情来实现你想要的东西：JS Fiddle

function setBackground() {
    var height = $(window).height();
    var width = $(window).width();
    $('.jumbotron').css('background-image', 'url(https://unsplash.it/' + width + '/' + height + ')');
}

关于原文的说明：
jumbotron需要一个选择器标记（class / id）
$(window).width();后遗漏了+ 对于Upslash链接，宽度需要在高度才能正常工作。

还有一个注意事项：
你想要这个功能在加载时运行吗？如果是这样，请务必调用该函数，因为它未设置为立即运行。

Answer 2

尝试删除字符串中的分号。

function setBackground () {
    $('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height() + '/' + $(window).width()')');
}

在字符串中间加一个分号会强制它在字符串完成之前停止。

Answer 3

试试这个： -

<script type="text/javascript">
function setBackground () {
$('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height(); + '/' + $(window).width(); + ')');
}
</script>>

你在宽度之后错过了'+'符号。

jquery用动态网址添加背景图片

3 个答案: