css - 用 CSS 创建两个颜色“条”？

Question

我正在使用一些（引导程序）CSS。现在，我正在重新构造导航栏。这是我正在处理的部分的 CSS。

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #000000;
  background-color: #transparent;
}

我正在专门研究背景部分。我想在顶部画一条颜色，然后在下面有透明度（或另一种颜色）。与渐变不同，我不希望这些混合。我在 Photoshop 中创建了这个模型（如果可能，黑色代表我想要透明的部分）。

样机图像

Answer 1

我不确定这是否是您想要的，但请尝试添加边框顶部：

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000000;
    background-color: #transparent;
    border-top: 3px solid #FF9900;
}