Сделайте навигационную панель различного уровня прозрачности RGBA

Question

Я пытаюсь создать панель навигации с непрозрачностью.7, но сам конец должен быть в основном полностью прозрачным, чтобы заголовок моего логотипа мог просвечивать больше. Первоначально я использовал непрозрачность, но понял, что это не тот путь, по которому непрозрачность ребенка не может быть изменена и он усыновит родителя, поэтому я изучил RGBA, но, очевидно, я делаю это неправильно, потому что это не работает.

CSS код

#nav    {
width: 100%; /* Spans the width of the page */
height: 50px; 
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: absolute; 
background-color: rgb(94, 185, 176); /* The Fallback color */
background-color: rgba(94, 185, 176, .7); /* Make nav bar transparent to a degree */
margin-top:-45px; /* Make the nav bar overlap the header */
}


.navbar {
height: 50px;
margin: 0;
position: absolute; /* Ensures that the menu doesn't affect other elements */
border-right: 1px solid #54879d; 
margin-top:0px;
}

/* First Navigation List different than rest */

#nav.navbar li.first {

height: 50px;
width: 133px;
background-color: rgb(94, 185, 176); /* The Fallback color */
background-color: rgba(94, 185, 176, 0); /* Make first section completly   transparent*/
}
.navbar li.first:hover, a:hover {
background-color: transparent;
}

/*All other Navigation Lists */

.navbar li  {
height: 50px;
width: 145px;
float: left;
text-align: center;
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(94, 185, 176); /* The Fallback color */
background-color: rgba(94, 185, 176, .7); /* Make nav bar transparent to a    degree */
font-family: 'raindrops';
font-size: 22px;
color: #000000;
}

(и код продолжается для других вещей)

Я хочу, чтобы вся панель навигации была непрозрачной, но только крайняя левая была полностью прозрачной.

Вот HMTL для этого раздела

<div id="nav">
 <ul class="navbar">
 <li class="first"></li>
 <li><a href="#">Home</a></li>

Поэтому мне нужно, чтобы li class="first" был полностью прозрачным, а затем все остальные с ссылками nav должны быть прозрачностью 0.7, но это не работает.

Answer 1

В соответствии с тем, что вы сказали, "Сделать первый ли полностью прозрачным"

#nav li:first-child{
     background-color: rgba(94, 185, 176, 0);
}

Это то, что вы должны сделать, но из-за запасного цвета фона, который вы дали. даже он полностью прозрачен, что вы не видите из-за отступления.

Изменить: так как теперь у вас есть цвет фона в #nav для всех li, цвет фона - это цвет фона #nav, поэтому, чтобы первый div полностью прозрачным, имел цвет фона #nav

** Как насчет градиента: **

#nav {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(200, 255, 255, 0) 50%, rgba(94, 185, 176, 0.7) 50%);
}