在背景前放置圖像

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