jquery - 将图像放在背景前面

Question

我有一个部分可以滑入以蓝色背景查看。我试图在左上角放一张图片，但它几乎看不到，蓝色背景消失了。

HTML的一部分：

<header id="main">
    <a href="#" id="stackoverflow" class="icons"></a>
</header>
<section id="stack" class="news"></section>

jQuery：

$('#stackoverflow').click(function(){
    $('#stack').toggle('slow', $st);
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat', 'position':'absolute', 'z-index':'1'});
});

CSS：

#stack{
float: left;
}

.news{ 
position: absolute;
z-index: -1; 
width: 600px;
background-color: #0000FF;
padding: 10px;
border-radius: 10px;
box-shadow: 3px 2px 3px #000;
}

.news a{
position: absolute;
text-decoration: none;
color: #fff;
}

.news a:hover{
color: #dc692e;
}

.news td{
padding: 5px 10px;
border-bottom: 2px #fff solid;
}

这是我没有尝试将图像放在角落里的样子：

这是我尝试在角落添加图像时的图片：

谢谢！

Answer 1

蓝色背景消失的原因是由于您覆盖了实际背景。您应该能够通过以下方式获得您想要的东西：

$('#stackoverflow').click(function(){
    $('#stack').toggle('slow', $st);
    $('#stack').css({'background': 'url(stack.jpeg) no-repeat BLUE', 'position':'absolute', 'z-index':'1'});
}); 

另外要补充的是，由于您将图像作为背景放置在这里，我建议在所述元素的顶部添加一些填充，以使文本不会覆盖您的图像。

更好的解决方案是将所述图像实际注入特定元素。IE：

$('#stack').prepend('<img id="theImg" src="theImg.jpg" />')