html - 为什么我的背景色比我设置的要深？

Question

https://codepen.io/SynergyOfLife/pen/rPVYQW .

我有一个带有下拉菜单的粘性标题。它工作很好，但在我的下拉菜单周围，我的主要 li 元素的标题的其余部分的背景颜色更深。

var $fixme   = $( '.fixme' );
var fixmeTop = $fixme.offset().top;
var $main    = $( 'main' );
var $win     = $( window );

$win.scroll( function () {

  var atSticky = $win.scrollTop() >= fixmeTop;
  
  $fixme.toggleClass( 'sticky', atSticky );
  $main.css( 'padding-top', atSticky ? fixmeTop + 5 : 0 );
  
} );

$(function () {
  $(document).scroll(function () {
    var $nav = $(".fixme");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

@import url(css/bootstrap.min.css);
@import url(css/font-awesome.min.css);

/*  Min CSS  */

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.span-width {
  width: 100%;
}

.align-right {
  float: right;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #181818;
  color: #dddddd;
  font-size: 14px;
}

.fixme {
  width: 100%;
}

.right {
  float: right;
  margin: 0 34px;
  padding: 0 15px;
}

a,
a:hover,
a:focus {
  font-size: 16px;
  outline: 0 solid transparent;
  text-decoration: none;
  transition-duration: 500ms;
}

ul,
ol {
  margin: 0;
}

ul li,
ol li {
  list-style: none;
}


/* Header Area CSS */

.header-area {
  width: 100%;
}

.header-area .top-header-area {
  height: 85px;
  padding-right: 70px;
  width: 100%;
}

.header-area .top-header-area .top-search-area form {
  position: relative;
  width: 255px;
}

.header-area .top-header-area .top-search-area form input {
  background-color: #1a1a1a;
  border: none;
  border-radius: 10px;
  color: #ababab;
  font-size: 12px;
  font-style: italic;
  height: 42px;
  padding: 0 20px;
  transition-duration: 500ms;
  width: 100%;
}

.header-area .top-header-area .top-search-area form button {
  background-color: transparent;
  color: #555555;
  cursor: pointer;
  height: 42px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.header-area .top-header-area .top-search-area form button:hover {
  color: #20d8da;
}

.header-area .top-header-area .login-area a {
  border-radius: 10px;
  color: #555555;
  display: block;
  font-size: 14px;
  font-weight: 400;
  height: 42px;
  line-height: 42px;
  margin-left: 10px;
  text-align: center;
  transition: background-color color ease-in-out 400ms;
  width: 160px;
}

.header-area .top-header-area .login-area a:hover {
  background-color: black;
  color: #f06040;
}

.p {
  color: green;
  padding: 20px 0;
}


/*  NavBar CSS  */

.header-area .fixme #main-navigation {
  background-color: #181818e6;
  height: 70px;
  padding: 20px 110px 0 110px;
  width: auto;
}

.header-area .fixme #main-navigation li {
  background-color: #181818e6;
  position: relative;
}

.header-area .fixme #main-navigation>li {
  float: left;
  margin-right: 5px;
}

.header-area .fixme #main-navigation li a {
  color: #f06040;
  display: block;
  font-weight: 500;
  line-height: 1em;
  padding: .5em;
  text-decoration: none;
}

.header-area .fixme #main-navigation li a:hover {
  color: #20d8da;
}

.header-area .fixme ul.folder-child {
  height: 0;
  left: 0;
  margin-top: 15px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  transition: all 200ms ease-in-out;
  visibility: hidden;
  width: 150px;
}

.header-area .fixme #main-navigation li:hover>ul.folder-child {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  height: 100px;
  opacity: 1;
  visibility: visible;
}

.hidden-caret {
  visibility: hidden;
}

    <header class="header-area">
  <div class="top-header-area">
    <p style="float: left; font-size: 32px;">Logo Here</p>
    <div class="row h-100 align-items-center right">
      <div class="d-flex">
        <div class="d-flex">
          <div class="top-search-area">
            <form action="#" method="post">
              <input type="search" name="top-search" id="topSearch" placeholder="Search">
              <button type="submit" class="btn"><i class="fa fa-search"></i></button>
            </form>
          </div>
          <div class="login-area">
            <a href="#"><span>Login / Register</span> <i class="fa fa-lock" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fixme">
    <ul id="main-navigation">
      <li><a href="#">Fill <i class="fa fa-caret-down hidden-caret"></i></a></li>
      <li>
        <a href="#">In <i class="fa fa-caret-down"></i></a>
        <ul class="folder-child">
          <li><a href="">a</a></li>
          <li><a href="">b</a></li>
          <li><a href="">c</a></li>
        </ul>
      </li>
      <li><a href="#">This <i class="fa fa-caret-down hidden-caret"></i></a>
      </li>
      <li>
        <a href="#">Here! <i class="fa fa-caret-down"></i></a>
        <ul class="folder-child">
          <li><a href="">d</a></li>
          <li><a href="">e</a></li>
          <li><a href="">f</a></li>
        </ul>
      </li>
      <li><a href="#">Contact <i class="fa fa-caret-down hidden-caret"></i></a></li>
    </ul>
  </div>
</header>
<main>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin tempor id eu nisl nunc. Massa enim nec dui nunc mattis enim ut tellus. Diam maecenas ultricies mi eget mauris pharetra et ultrices.
  <br>
<p class="p">Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<p>Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<br>
<p>Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>

我已经删除了所有的 background-color 选择器，一个一个，但我仍然得到奇怪的背景颜色。

我正在使用 rgba，因此重叠的背景颜色可能会使它变暗。有什么建议吗？

Answer 1

删除这条规则:

.header-area .fixme #main-navigation { /* and/or ... li */
    background-color: #181818e6;
}

如果要保留显式样式，请删除最后两个字符。他们实质上改变了灰色，并使前两个字符成为 alph channel (透明度)修饰符。