將圖像轉換爲背景內容

我遇到了一個問題，我試圖以唯一想到的方式解決它。問題是我試圖將內容附加到圖像按鈕上，但內容被隱藏，並且當用戶將鼠標懸停在帶有背景圖像的按鈕旁邊時，將其顯示在旁邊。這是問題出現時，我將背景圖像當作圖像（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(){ 
});

上述聲明的intented，這是加div img之後的所有內容，這就是我難以理解的，我希望能夠使背景img標記內容的實際背景。如果我嘗試將CSS中的background-image設置爲div的url。圖像不會使背景變得足夠大。請記住，我在下，即對某些情況而言，有6，但對於大多數情況，只有即8。

所以，我曾嘗試用css來改變的z-index的圖像和內容像這樣：但不工作：

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

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

來源

2011-01-06 Jake

我會用不同的方法。結構化你的內容是這樣的：

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

所以，你可以沒有任何JS工作，如果我理解這個問題...在這裏看到一個例子： http://jsfiddle.net/meo/h64w4/4/

來源

2011-01-06 22:25:47 meo

隨着懸停部分：HTTP：/ /jsfiddle.net/meo/h64w4/ - 需要成爲在IE中工作的錨元素 – sunn0 2011-01-06 22:37:14

-1

如果你沒有使用一個可怕的瀏覽器， css3可以借給你一隻手。

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

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

來源

2011-01-06 22:14:38 Calum

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

來源

2011-01-06 22:31:34 Calum

將圖像轉換爲背景內容

回答

相關問題