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之后添加所有内容，这是我难以理解的，我希望能够使背景img标记内容的实际背景。如果我尝试将css中的background-image设置为div的url。图像不会使背景足够大。请记住，对于某些情况，我处于即6 之下，但对于大多数情况，只有即8 。

所以我试过用css来改变图像和内容的z-index如下：但不起作用：

#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

将图像转换为内容背景

3 个答案: