在不影響導航欄或文本的情況下灰掉背景圖像

所以基本上我試圖弄灰我的背景圖像（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

好的，首先將所有內容從'

在不影響導航欄或文本的情況下灰掉背景圖像

回答