jQuery 更改背景图像时遇到问题答案

【问题标题】：Having trouble with jQuery changing the background imagejQuery 更改背景图像时遇到问题
【发布时间】：2017-01-08 08:42:14
【问题描述】：

我正在尝试通过从页面上的图像标记 (img#backSwitch) 中拉取 src 属性来使 jQuery 动态更改背景图像（稍后我将从 php 中的数组中随机拉取），并更改 div .background-image 元素的 background-image 属性值与 src 属性的值无关。我的 console.log 工作得很好，我想我在 jQuery 中所做的事情也很好，但很明显我做错了什么或者忽略了一个没有显示错误的错误。任何帮助都会很棒！

这是我的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <div class="background-image"></div>
    <div class="content">
        <img src="img/ped4.jpg" id="backSwitch" alt="Pedestal" />
    </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/js.js"></script>
  </body>
</html>

这是我的 jQuery

(function() {

    var backSwitch = $('#backSwitch').attr('src'),
        theURL = 'http://staging.youknowphabo.com/';


    $('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+');'});

    console.log(theURL+backSwitch);

})();

这是我的 CSS

@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400);

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 auto;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}


.content {
    position: relative;
    z-index: 999;
} 

.content img {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    display: block;
    text-align: center;
    margin: 0 auto;
}

【问题讨论】：

试试：$('.background-image').css("background-image", "url("+theURL+backSwitch+")");

标签： javascript jquery html css

【解决方案1】：

我认为问题是一个错字：

$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+')'});

尝试从 CSS url 属性中删除分号。

你也可以这样写：

$('.background-image').css({'background-image': 'url('+theURL+backSwitch+')'});

【讨论】：

$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+')'});对象内的“背景图像”需要改为背景图像。所以... $('.background-image').css({'background-image': 'url('+theURL+backSwitch+')'});
@user2278120 我认为 backgroundImage 也应该可以工作：JSFiddle
删除; 也对我有用。请注意，您也可以改用$('.background-image').css('backgroundImage', 'url(' + theURL + backSwitch + ')');。
@ChrisHappy 两者都应该工作，对吧？我使用了 OP 使用的那个，但实际上首先测试了它是否是“背景图像”，但看起来都还可以。
@Alvaro 是的，我测试了你的解决方案，+1，它对我有用。我只是在主题中添加了另一种方式，“总有另一种方式来做到这一点”:)