我是 CSS 的新手,我的页眉图像没有显示。每当我尝试将它添加到我的页眉时,导航栏会变成稍微深一点的红色?你和你的天才头脑想出来了!
CSS:
header {
background: url("http://www.charlottecentercity.org/wp-content/uploads/2013/09/Imaginon-pic.jpg");
background-size: cover;
image-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 70px;
display: inline;
}
li {
display: inline;
}
nav {
background: rgba(255,0,0,0.5);
}
nav img {
height: 60px;
margin: 5px;
float: left;
}
html:
<header>
<nav>
<img src="https://dl.dropboxusercontent.com/u/105222237/RGBjpeg.png" />
<ul>
<li><a href="#">About Imaginon</a></li>
<li><a href="#">General Info</a></li>
<li><a href="#">Programs and Events</a></li>
<li><a href="#">Plan Your Visit</a></li>
<li><a href="#">Just for Fun</a></li>
</ul>
</nav>
</header>
最佳答案
背景图像是显示在页眉上,但是:
它被设置为
background-size: cover
,这意味着您只能看到最顶部的蓝色部分。据推测,当您有更多内容时,您会看到更多标题,但同时您可以添加min-height: 600px;
,例如。导航栏的背景色是微红色的半透明背景色,位于标题背景色之上。如果您不想要红色,只需将其移除即可。
关于html - 背景图片不会显示在标题中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24855626/