不透明搞乱文本

Question

所以我有一个问题。我有标题，标题上有文字。标题不透明度为0.55，文本包含在标题类中。现在问题就在这里，因为它的内部，文本也会得到应用于它的不透明度。这是的样子。正如你所看到的那样，文字很轻松。我尝试在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)并一起删除不透明度属性

Answer 2

您可以使用@ Erik的解决方案（更干净），也可以在其后面添加单独的元素：（DEMO）

<div class="header headerbg"></div>
<div class="header">...etc...</div>

CSS：

.headerbg{
  background: #EFEFEF;
  opacity: 0.55;
}

.header{
  text-align: center;
  height: 55px;
  width: 100%;
  position: fixed;
}

使用:before伪元素也可以实现这一点，以使显示更加分离。