CSS背景图片未显示
[英]CSS background-image not showing
问题描述
当我尝试通过CSS在div中放置背景图片时，没有任何显示。 我尝试添加位置，宽度，高度等属性。 而且，我还可以通过CSS将照片放在<body>标记中。 但是，显然，我不想不必把它留在那里。 这是我的html：
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div id="photo">
</div>
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</body>
</html>
这是我的CSS：
#photo{
background-image: url('../images/bandbanner.png')
}
5 个解决方案
解决方案1
1 2014-08-11 20:14:13
div照片不包含任何内容，请尝试添加
#photo{
background-image: url('../images/bandbanner.png');
width: 100%
padding : 100px;
//hopefully this will make the photo appear and you can go from there
}
解决方案2
1 2014-08-11 20:15:20
<div id="photo">
</div>
在您的潜水中，您没有设置大小。 例如：
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
解决方案3
0 2014-08-11 20:18:37
设置#photo height和width属性。
参见工作示例： http : //jsfiddle.net/ihkawiss/2n0o9t9x/
解决方案4
0 2014-08-11 20:21:09
设置你的height和width
width: px;
height: px;
解决方案5
0 2014-08-11 20:26:23
HTML：
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div class="photo">
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</nav>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</div>
</body>
</html>
和CSS：
.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
CSS：背景图片未显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.