javascript - jquery 添加带有动态 url 的背景图片

Question

您好，希望对您有所帮助。我的 JavaScript 不是那么热门，我尝试搜索但没有找到正确的方法。

我正在尝试将 css background-image 添加到 div (.jumbotron)，但会根据屏幕大小动态更改 url。图片将从https://unsplash.it中获取其中 url 可以编码为所需的尺寸，即 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 或 class，确保给它一个选择器标签。

你可以做这样的事情来实现你想要的: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 链接，宽度需要在高度之前才能正常工作。

再补充一点:
你想让这个函数在加载时运行吗？如果是这样，请务必调用该函数，因为它没有设置为立即运行。