html - CSS 背景样式不适用?

标签 html css background-color

我已经开始为我的新网站导航栏设计样式,但是我的背景颜色不适用于它或我使用的任何其他 Div,也没有提取 Div ID。我的整个风格似乎一团糟,这在以前从未发生过。

代码如下:

    <div class="bar">
      <img src="/img/NavBar/Logo.png">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </div>

CSS:
body{
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  background:url("/img/Global/Background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

//*NAV BAR*//
.bar {
  background-color: #0F0F0F;
  width: 100%;
  height: 70px;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}
.bar a {
  padding-left: 40px;
  padding-right: 40px;
  text-decoration: none;
  font-size: 20px;
  color: #FFFFFF;
  float: right;
  margin-top: 20px;

}
.bar img {
  margin-top: 10px;
  margin-left: 20px;
}

CSS 已连接,因为我的背景图像正在显示,但背景颜色未显示。我尝试了不同的颜色,以确保不仅仅是背景图像和颜色本身之间的对比度差。

有人知道这里出了什么问题吗?

最佳答案

罪魁祸首是 //*NAV BAR*// 注释。 // 不是有效的 CSS 注释语法。它会使您的整个 CSS 文件无效。将其替换为 /*NAV BAR*/

关于html - CSS 背景样式不适用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25147230/

相关文章:

c# - 如何绑定(bind)到 Blazor 中集合/列表中的元素?

html - 显示 2 个边框,文本居中

html - 在 CSS 中根据浏览器大小更改背景颜色

javascript - 使用 JavaScript 同时提交 2 个表单

jquery - 如果我单击任何子项,如何在顶部设置事件类

javascript - 用一个导航标签控制多个标签内容

css - 如何使用带 react 动画的样式组件制作滑入和滑出

CSS3 <body> 背景颜色变化线性无限动画

java - preperedRenderer JTable 遇到问题

html - 将两个不同样式的页面合并为一个