元素背景图片未显示

Question

如果我给div这样的bg图像：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>


<style>

#image {
background-image:url(Images/1.jpg);
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
z-index:9999;
}

</style>
</head> 
<body style="background-color:#FFF;" >

  <div id="image"> </div>

</body></html>

然后什么也没显示。 我究竟做错了什么？ 我的图片已正确链接，除非即时通讯应该在div中放置某些内容，否则它应该可以正常工作。

Answer 1

您的div为空且未设置尺寸。 仅背景图片无法扩展元素，直到它可见为止，这就是为什么您需要指定width和height

如果还是不行

1. 检查CSS档案中的语法错误
2. 检查图像权限（确保它是644或更高）

Answer 2

高度默认为内容的高度。 由于没有内容，因此高度为0。宽度通常是自动的，但是当绝对定位时，宽度也将变为0。

因此，只需将宽度和高度添加到#myimage

例：

#myimage {
    background-image:url(http://placekitten.com/200/300);
    position:absolute;
    top:0px;
    left:0px;
    z-index:9999;
    /*new*/
    width:200px;
    height:300px;
}

http://jsfiddle.net/NuCzS/