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

Hi and hope you can help. My JavaScript isn't that hot and I have tried searching but had no luck with find the correct method.

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

I am trying to add css background-image to a div (.jumbotron) but dynamically change the url depending on the screen size. The image will be picked up from https://unsplash.it where the url can be coded to the dimensions required i.e. https://unsplash.it/200/300

我试图将css背景图像添加到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>

I hope this make sense and thanks in advance

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

3 个解决方案

#1

Assuming jumbotron is an id or class, make sure you give it a selector tag.

假设jumbotron是id或class,请确保给它一个选择器标签。

You can do something like this to achieve what you are wanting: JS Fiddle

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

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

Notes on your original:
jumbotron needed a selector tag (class/id)
$(window).width(); was missing a + after it.
For the Upslash link, the width needs to be before height to work properly.

关于你原版的注释:jumbotron需要一个选择器标签(class / id)$(window).width();在它之后错过了一个+。对于Upslash链接,宽度需要在高度才能正常工作。

One more note:
Do you want this function to run on load? If so, be sure to call that function since its not set to run instantly.

还有一点需要注意:您是否希望此功能在加载时运行?如果是这样,请务必调用该函数,因为它未设置为立即运行。

#2

Try removing the semi colon in the string.

尝试删除字符串中的半冒号。

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

Having a semicolon in the middle of the string will force it to stop before the string is completed.

在字符串中间使用分号将强制它在字符串完成之前停止。

#3

Try This:-

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

you have missed the '+' sign after width.

宽度后你错过了'+'号。

#1