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

的原因

如果仍然无效

检查css文件上的语法错误
检查图像权限（确保为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/

元素bg图像没有显示

2 个答案: