在不影响导航栏或文本的情况下灰掉背景图像

所以基本上我试图弄灰我的背景图像（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>&copy 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; 
}

来源

2015-08-16 Macuser

您需要关闭您的a：hover，a：您的css中的活动标签，但您还需要澄清您要完成的工作。你的html中的元素是应用于图像的元素？放置一些代码以获取迄今为止尝试的内容。 – amespower

@bklynM嗯，我只是想让图像作为整个页面的背景。我的原始代码为 '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; }' – Macuser

我不知道如果我正确地给你.. ..但我的建议是：

*，因为它的只是一个背景图像，如果你有一个像“photoshop”的照片编辑器，把它（图像）放入编辑器并应用覆盖层使其变为灰色（黑色&白色）。

*然后应用下面body标签的CSS：

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标签中。

来源

2015-08-16 21:55:29 Sam

啊，这真是个好主意！另外，你可能可以帮我做些什么以及如何将样式从index.html移动到我的样式表中？ – Macuser

哦，你发布的CSS代码显示超大的图像。它只有图像的顶部。我之前添加背景图片的方式是使用以下CSS代码：'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; }' – Macuser

好的，首先将所有内容从'

在不影响导航栏或文本的情况下灰掉背景图像

回答