Question

下面我的连接有什么问题？

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\"'+ bg +'\") no-repeat;">';
});

我的演示在http://jsfiddle.net/su3fpkex/

我用\转义双引号，但似乎无法正常工作。

Answer 1

试试这个：

$(function(){

  var bg = "http://i.imgur.com/kqRNO6M.jpg";
  var html = '<div style=\'background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url("'+ bg +'") no-repeat;\'>';

});

并记得将html变量附加到某处！：）

Answer 2

您忘了将html内容放在页面中：

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';
    $('body').append(html);
});

Answer 3

试试这个

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';

    alert(html);
});

Answer 4

如果设置背景图像，则必须为div设置宽度和高度。

<div class='img'></div>

$(function(){
   var bg = "http://i.imgur.com/kqRNO6M.jpg";
   var html = '<div style="width:300px;height:300px;background-size:cover;background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';
    $('.img').html(html);

});

使用连接将图像URL设置为背景属性

4 个答案: