Question

我使用以下代码使用jquery在文档加载上显示图像。但是没有显示图像。我的代码是

$(document).ready(function () {
      $('#cover-img').css("background-image", "http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.jpg");
  });

.default_cover_image {
    position: relative;
    width: 1350px;
    height: 320px;
    left: 0;
    top: 0;
    background-color: #b8dcf4;
  }

<div class="default_cover_image" id="cover-img"></div>

Demo

Answer 1

怎么样

$('#cover-img').css("background-image", "url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.jpg')");

Answer 2

您忘记添加url()：

$('#cover-img').css(
  "background-image", "url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.jpg')"
  //-------------------^^^^^
);

语法为：

background-image: url('path');

但你已经给出了：

background-image: path;

<强>段

$(document).ready(function () {
      $('#cover-img').css("url('background-image", "http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.jpg')");
  });

.default_cover_image {
    position: relative;
    width: 1350px;
    height: 320px;
    left: 0;
    top: 0;
    background-color: #b8dcf4;
  }

<div class="default_cover_image" id="cover-img"></div>

Answer 3

你可以给一个带有背景图像的自定义类，然后在文档加载时你可以把类放到所需的元素。

试试这个http://jsfiddle.net/19dd7nwa/3/

 .customclass {
          background-image:url("http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.jpg");
     }



 $(document).ready(function () {
  $('#cover-img').addClass('customclass');
 });

在jquery中设置background-image不起作用

3 个答案: