在背景前放置图像

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; 
} 

这里是什么样子没有我试图TI在角落里放的图像：

下面是我试图在角落中添加图像时的图片：

谢谢！

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" />')