2010-10-28 151 views
-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> 
<style type="text/css"> 
.user-bg { 
background:-moz-linear-gradient(center bottom , #0E0E0E 70%, #9B9B9B 100%) repeat scroll 0 0 transparent !important; 
} 
.user { 
    display:block; 
    padding:5px; 
    position:absolute; 
    width:auto; 
    z-index:5; 
} 

.ui-corner-all { 
    -moz-border-radius:4px 4px 4px 4px !important; 
} 
.ui-corner-all { 
    -moz-border-radius:6px 6px 6px 6px; 
} 
</style> 
</head> 
<body> 
<img src="4cc7ea9c6daee.jpg"> 
<div class="user ui-corner-all user-bg" id="user-1" style="left: 288px; top: 299px;"> 
    <div class="user-avatar-text ui-widget ui-corner-all" id="user-avatar-text-1" style="visibility: visible;">  
     <span class="user-name">Rahul</span><br>  
     <button id="user-info-1" class="ybutton user-info">Details</button>  
    </div> 
    <div class="ui-corner-all user-avatar user-active" id="user-avatar-1" style="visibility:visible;"> 
     <div class="ui-corner-all user-avatar-image-bg">  
      <div id="user-avatar-image-1" style="background:url('4cc7ea9c6daee.jpg') no-repeat scroll center center rgb(0, 0, 0);" class="ui-corner-all user-avatar-image">  </div> 
     </div> 
    </div>   
     <div class="user-halo ui-corner-all ui-resizable ui-resizable-autohide" id="user-halo-1" style="visibility: hidden;"> 
     <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none; display: none;" unselectable="on"></div> 
     </div>  
     <div class="user-chat ui-state-error ui-corner-all" id="user-chat-1" style="visibility: hidden;"></div> 
    </div> 
</body> 
</html> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    var popup_pos=$('#card-208').offset(); 
    var timer; 
    $("#card-208").bind('mouseover',{},function() { 

     setTimeout(function() { 
      $("#divtoshow").show(); 
     }, 1000); 
    });  
    $("#card-208").bind('click',{},function() { 
     $("#card-208").unbind('mouseover'); 
      alert('click event is triggered'); 





    });  

    $("#divtoshow").bind('mouseleave',{} ,function() { 
      $("#divtoshow").hide(); 
    }); 
}); 
</script> 

喜在这个div背景图像不显示

我的背景图片没有显示手段这个div是不可见的。

为什么?请告诉我..

问候

拉胡尔

回答

0

因为div有没有内容,没有高度和宽度没有被渲染为为0x0像素,所以没有空间来显示图像。

但是,图像是内容(头像向访问者传达信息),因此您应该使用<img>元素,而不是CSS背景图像属性。

0

它的工作原理,但只在Firefox,因为-moz前缀是一个Firefox特定的供应商前缀。

你也有你的<script>块外<html>。把它移进去。

看到你的示例代码在这里工作:http://jsbin.com/urupu3