jQuery CSS链接背景图像和z-index

Question

我有一个生成图像的div .result。我需要在该div中设置一个背景图像，该图像将作为生成图像顶部的图层。我有以下内容，但无法显示图片：

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background-image", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});

屏幕截图右侧的图像是渲染裁剪。您可以在背景中（沿着顶部和左边框）看到应该位于渲染图像顶部的图像。

Answer 1

您正尝试使用background属性的简写background-image语法。您需要将其更改为background。

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});

Answer 2

http://www.w3schools.com/css/css_background.asp

body {
    background-image: url("gradient_bg.png");
    background-repeat: no-repeat;
}

或

body {
    background: url("gradient_bg.png") no-repeat;
}

像

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});

或

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background-image", "url('iphone_5.jpg')").css("Background-repeat", "no-repeat").css("z-index", "1000"));
});

啊，慢一点：c