Question

<!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不可见。

为什么呢？请告诉我..

问候

rahul

Answer 1

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

然而，图像是内容（化身向访问者传达信息），因此您应该使用<img>元素而不是CSS背景图像属性。

Answer 2

它只能在Firefox中使用，因为-moz前缀是firefox特定的供应商前缀。

您的<script>区域外<html>。把它移到里面。

请参阅您在此处使用的示例代码：http://jsbin.com/urupu3

背景图片没有显示

2 个答案: