0

如果我给一个 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 中放一些东西，否则它应该可以工作。

4

2 回答 2

1

你的 div 是空的，并且没有设置维度。仅背景图像在元素可见之前无法扩展元素，这就是您需要指定width和height

如果这仍然不起作用

  1. 检查 css 文件上的语法错误
  2. 检查图像权限（确保它是644或更高）
于 2012-05-14T19:43:08.753 回答
0

高度默认为内容的高度。由于没有内容，所以高度为 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/

于 2012-05-14T19:43:57.187 回答