html - 部分透明/低不透明度导航栏？

Question

我看过一些实现此设计的教程、youtube 视频和网站源代码，但我无法完成。这是我想要创建的导航栏类型的图像。 http://imgur.com/BHavGXg

这是我的导航栏的html:

<div class="nav">
    <ul>
        <li><a href="#">Notes</a></li>
        <li><a href="#">Classes</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Research</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

这是我的导航栏 CSS:

    .nav {
       width: 100%;
       border: 1px solid #ccc;
       color: #fff;
       border-right: none;
       background-color: rgba(1, 1, 1, 0.6);
       color: rgba(1, 1, 1, 0.8);
}

感谢您的帮助。非常感谢像我这样的初学者。

Answer 1

您必须为导航和文本创建不同的类。为了使导航器透明，您可以使用属性

opacity: (Insert value);

希望这对您有所帮助!