个人中心
gpt4 book ai didi

html - 在不影响导航栏或文本的情况下将背景图像变灰

转载 作者：行者123 更新时间：2023-11-28 07:22:01 24 4
gpt4 key购买 nike

基本上，我试图将我的背景图像 (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>&copy 2014 Edited for privacy</div></font>
<div style="position: absolute; bottom: 0px; "><font color = #FFFFFF>Hosted by GitHub</div></font>
</html>

样式表.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 标签内。

关于html - 在不影响导航栏或文本的情况下将背景图像变灰，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32040194/

24 4 0
文章推荐： c++ - 模板类的类型独立对象
文章推荐： javascript - AJAX 表单未提交或执行任何操作
文章推荐： ios - 删除@IBInspectable 错误 : Failed to set () user defined inspected property on (UIView)
文章推荐： c++ - QGraphicsBlurEffect 仅在父部件上