Question

我正在尝试制作一个0.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;
}

（代码继续用于其他事情）

我想要整个导航栏0.7不透明度，但是最左边的一个是完全透明的。

以下是该部分的HMTL

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

所以我需要li class =“first”完全透明，然后所有其余的导航链接都是0.7透明度，但它不起作用。

Answer 1

根据你所说的＆＃34;让第一个li完全透明＆＃34;

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

这是你必须要做的，但是由于你给出的后备背景颜色。即使它完全透明，你也不会因为后退而看到。

编辑：因为你现在对于所有li都有 #nav 的背景颜色，背景颜色是 #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%);
}

使导航栏具有各种级别的透明度RGBA

1 个答案: