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

【问题标题】：jQuery CSS chaining background image and z-indexjQuery CSS 链接背景图像和 z-index
【发布时间】：2014-10-24 15:20:52
【问题描述】：

我有一个生成图像的 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"));
});

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

【问题讨论】：

您能否尝试改写实际问题，目前还不清楚您要达到什么目的。您的代码中也有一些错误！但首先要问一个更清楚的问题！

标签： jquery css background-image z-index jquery-chaining

【解决方案1】：

您正在尝试使用带有background-image 属性的简写background 语法。您需要将其更改为 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"));
});

【讨论】：

这就是我要找的。但是，我无法让 iphone 图像位于生成的图像之上。
那是因为它是背景图片。背景在内容的背后，而不是在内容之上。
而且，我周五早上在这里度过了一个美好的时光 :)

【解决方案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

【讨论】：