不透明度弄乱了文本

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;
}

不要忘记演示。有任何想法吗？

Answer 1

opacity不要在标题上使用，而是将背景颜色设置为rgba(239,239,239, 0.55)并一起删除不透明度属性