Question

此页面上的我的导航栏工作正常，但应该在其下的图像没有显示。我所要做的就是制作图像＆＃34; bubbles.png＆＃34;显示在导航栏下。我不能使用img标签，因为它不允许其中的东西（这是我需要的）任何帮助？代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>.</title>
<style type="text/css">
#main{
    background: url(http://www.poweredwebsite.com/images/bubbles.png) center;
    height: 50%;
    background-size: 60% 100%;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.navtext {
color: white;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
display: inline;
}
#nav {
background-color: #336699;
clear: both;
width: 100%;
height: 100%;
border-bottom: 2px darkred solid;
text-align: center;
}
</style>
</head>

<body>
<div id="nav">
<h2 class="navtext">Home&emsp;&emsp;&emsp;&emsp;</h2>
<h2 class="navtext">About us&emsp;&emsp;&emsp;</h2>
</div>
<div id="main">

</div>
</body>

</html>

Answer 1

指定一个明确的高度：Example

你的主人无法找到继承的高度：

#main{
background: url(http://www.poweredwebsite.com/images/bubbles.png) center;
height: 50px;
background-size: 60% 100%;
}

Answer 2

选中此JS Fiddle

#main{
    background: url("http://www.poweredwebsite.com/images/bubbles.png") repeat scroll center center;
    height: 150px;
        background-size: 60% 100%;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.navtext {
color: white;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
display: inline;
}
#nav {
background-color: #336699;
clear: both;
width: 100%;
height: 100%;
border-bottom: 2px darkred solid;
text-align: center;
}

问候D.

图像没有出现问题

2 个答案: