html - 不透明度搞乱文本

Question

所以我遇到了问题。我有一个标题，标题上有文字。 header 的不透明度为 0.55，文本被包裹在 header 类中。现在问题来了，因为它的内部，文本也应用了不透明度。这是它的样子 .如您所见，文字有点亮。我已尝试在 ui li 扇区本身上将不透明度设置为 1.0，但这也无济于事。我也尝试了 z-index，但仍然没有帮助。

这是我的 HTML

<div class="header">
  <ul>
   <li>
    Email
   </li>
   <li>
    Github
   </li>
       <li>
     Twitter
   </li>
  </ul>
</div>

和 CSS

.header{
    text-align: center;
    height: 55px;
    width: 100%;
    background: #EFEFEF;
    opacity: 0.55;
    position: fixed;
}
ul li{
    display: inline-block;
    color: #000;
    opacity: 1.0;
    font-size: 28px;
    font-family: 'Avenir Next';
    padding: 10px 35px;
}

别忘了 demo .有任何想法吗？

Answer 1

不要在页眉上使用 opacity，而是将背景颜色设置为 rgba(239,239,239, 0.55) 并一起摆脱 opacity 属性