所以基本上我正在尝试使我的背景图像变灰(OldRag.jpg),但是将导航栏和其他文本保留在主页上并且仍然是彩色的 . 我粘贴的代码删除了背景图片代码 . 我已经尝试了在HTML,CSS和HTML和CSS中使用灰色背景图像的所有不同方法,但它们都没有正常工作 . 它们会使导航栏和文本变灰,或者他们将导航栏向下推,文本卡在图像中 .
的index.html
<html>
<title>Edited for privacy - Index</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
width: 100px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
</style>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="Resume.pdf">Resume</a></li>
<li><a href="Edited for privacy">Blog</a></li>
<li><a href="Edited for privacy">GitHub</a></li>
</ul>
<br>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<h2><center>Welcome!</center></font></h2>
<p><center>Thanks for checking out my personal website! Please feel
free to browse the content! </center></p>
</body>
<div style="position: absolute; bottom: 15px; "><font color = #FFFFFF>© 2014 Edited for privacy</div></font>
<div style="position: absolute; bottom: 0px; "><font color = #FFFFFF>Hosted by GitHub</div></font>
</html>
stylesheet.css中
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}
#nav li {
display: inline-block;
text-align: center;
}
1 回答
我不知道我是否正确对你.. ..但我的建议是:
*因为它只是一个背景图像,如果你有像“photoshop”这样的照片编辑器,将它(图像)带入编辑器并应用叠加层使其变为灰色(黑白) .
*然后将下面的CSS应用于body标签:
此外,由于你已经有了一个外部样式表,为什么不在你的“index.html”中取出额外的样式并把它放在那里.. ..它将帮助你避免一些重复 .
请将导航菜单放在body标签内 .