[英]Gray out background image without affecting nav bar or text
因此,基本上,我试图将背景图像(OldRag.jpg)涂成灰色,但将导航栏和其他文本保留在主页上,并仍然保持彩色。 我粘贴的代码删除了背景图片代码。 我尝试了所有不同的方法来使HTML,CSS和HTML AND 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;
}
我不知道我是否正确理解了...但是我的建议是:
*由于它只是单个背景图像,因此,如果您有照片编辑器(例如“ photoshop”),请将其(图像)放入编辑器中,并应用覆盖使其变为灰色(黑白)。
*然后将以下CSS应用于body标签:
html {
background: url(OldRag.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
//EDIT start
#nav { //notice I didn't include your ul tag. as I'm assuming you're having just one in the page with the ID of nav
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}
#nav li {
display: inline-block;
text-align: center;
}
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;
}
//EDIT end
另外,由于您已经有一个外部样式表,所以为什么不在您的“ index.html”中删除多余的样式并将其放在那里....它将帮助您避免重复。
并将导航菜单放在body标签内。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.