变灰背景图像而不会影响导航栏或文本

Question

So basically I'm trying to gray out my background image (OldRag.jpg), but keep the nav bar and other text on the home page on top of it and still in color. 因此，基本上，我试图将背景图像（OldRag.jpg）涂成灰色，但将导航栏和其他文本保留在主页上，并仍然保持彩色。 The code I've pasted has the background image code removed. 我粘贴的代码删除了背景图片代码。 I've tried all of the different ways of graying out background image in HTML, CSS, and HTML AND CSS, and none of them work correctly. 我尝试了所有不同的方法来使HTML，CSS和HTML AND CSS中的背景图像变灰，但它们均无法正常工作。 They either gray out the nav bar and text, or they push the nav bar down and the text gets stuck in the image. 它们要么使导航栏和文本变灰，要么将导航栏向下推，文本被卡在图像中。

index.html 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 stylesheet.css

#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}

#nav li {
display: inline-block;
text-align: center;
}

Answer 1

I don't know if I got you correctly.. ..But my suggestion is: 我不知道我是否正确理解了...但是我的建议是：

*since it's just a single background image, if you have a photo editor like "photoshop", take it (the image) into the editor and apply an overlay to make it gray (Black&white). *由于它只是单个背景图像，因此，如果您有照片编辑器（例如“ photoshop”），请将其（图像）放入编辑器中，并应用覆盖使其变为灰色（黑白）。

*then apply the css below to the body tag: *然后将以下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

Also, since you already have an external stylesheet, why not take out the extra styling in your "index.html" and put it there.. ..it will help you avoid some repetition. 另外，由于您已经有一个外部样式表，所以为什么不在您的“ index.html”中删除多余的样式并将其放在那里....它将帮助您避免重复。

And please put the navigation menu inside the body tag. 并将导航菜单放在body标签内。

变灰背景图像而不会影响导航栏或文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-16 21:55:29

变灰背景图像而不会影响导航栏或文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-16 21:55:29

解决方案1
0 已采纳 2015-08-16 21:55:29