將圖像轉換為內容背景

Question

我遇到了一個問題，我試圖以唯一想到的方式解決它。 問題是我試圖獲取附加在圖像按鈕上的內容，但是當用戶將鼠標懸停在內容上時，該內容被隱藏並顯示在帶有背景圖像的按鈕旁邊。 這是問題出現的時候，我當前的背景圖像只是一個圖像（img標簽），所以我可以通過調整高度/寬度來拉伸它。 我希望能夠將內容放在該圖像的頂部：例如：

<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>

<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>

所以用jQuery我忽略了簡單的語法錯誤

var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
  function(){
    mem=$(this).find(".Content").html();
    $("#backgroundDiv").html(img+mem);
  }function(){
});

上面是按照意圖進行的，即將所有內容添加到div img之后，這是我很想知道的內容，我希望能夠使background img標簽成為內容的實際背景。 如果我嘗試將CS​​S中的背景圖像設置為div的URL。 圖像不能使背景足夠大。 請記住我在IE 6的一些情況，但只到IE 8在大多數情況下。

因此，我嘗試使用CSS更改圖像和內容的Z索引，但這樣不起作用：

#backgroundimg{
  z-index:-100;
 position:absolute;

}
.Content{
 z-index:100;
 position:relative;
 }

Answer 1

我會使用不同的方法。 這樣組織內容：

+ DIV (position static / relative)
  + IMG (position relative)
  + DIV (position absolute)
    + "contents"

因此，如果我理解了這個問題，那么您可以不用任何JS就可以工作...在此處查看示例： http : //jsfiddle.net/meo/h64w4/4/

Answer 2

<script type="text/javascript">
$(document).ready(function(){
    var img= $("#backgroundDiv").html();
    $(".ContentDiv").mouseover(
    function(){
        $("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
        /* Use the following line if you want to scale the "background" image to the content */
            $("#backgroundDiv").css('height',$(this).find(".Content").height());
    });
});
</script>
<style type='text/css'>
#backgroundDiv{
    position:relative;
    height:auto;
    width:auto;
}
#backgroundimg{
    width:100%;
    height:100%;
}
.addedContent{
    position:absolute;
    top:0;
    left:0;
    z-index:999;
}
</style>

Answer 3

如果您不使用糟糕的瀏覽器，css3可能會幫助您。

background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ] 

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm