Tengo una barra de navegación con un semi-transparente de fondo, pero los enlaces de navegación también son semi-transparente. ¿Cómo puedo hacer que mi vínculos no se convierten en transparentes? He adjuntado una copia de mi código de abajo (también disponible en JSFiddle.

<style type="text/css">
body{
margin:0;
padding:0;
}

a{
font-family:sans-serif;
font-size:15px;
}

#nav{
height:30px;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}

#right{
position:absolute;
top:0;
right:0;
}

.gbt{
display:inline-block;
line-height:26px;
}

.gbtc{
margin:0;
padding:0;
}

.gbts{
padding:6px;
}
</style>

<div id="nav">
<ol class=gbtc>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
</ol>
</div>

Cualquier idea se agradece mucho y espero que usted pueda entender lo que estoy tratando de describir. El código que he proporcionado es más fácil de ver con una imagen de fondo.

Gracias de antemano,
Callum

InformationsquelleAutor Cosmo Posmo | 2011-04-09

3 Comentarios

  1. 3

    Yo lo haría así: http://jsfiddle.net/5p3vN/

    html:

    <div id="bg"></div>
    <div id="nav">
        <!-- the list -->
    </div>

    css:

    #bg{
        height:30px;
        width: 100%;
        background-color:#dddddd;
        filter:alpha(opacity=60);
        opacity:0.6;
    }
    
    #nav{
        position: absolute;
        top:0;
    }
  2. 7

    Para definir la opacidad de fondo, se puede establecer un rgba valor para el color de fondo. Esto no afectará a los elementos secundarios.

    #nav {
      background:rgba(221, 221, 221, 0.6);
    }

    Es decir no admite rgba sin embargo. Para esto, es necesario utilizar un filtro de propiedad:

    #nav {
      background:rgba(221, 221, 221, 0.6);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#  99dddddd);
    }
    • Esta es la respuesta correcta. No es necesario agregar marcado como se sugiere en la aceptó respuesta.
  3. 1

    La opacidad en CSS se hereda a los hijos. Que Se Detenga Por Completo. Para superar esta crear un fondo transparente para su navegación por separado y absolutamente la posición de su li artículos sobre él con un mayor z-index. Hay otras soluciones, pero todos ellos requieren de alguna forma de js, pero para hacerlo con puro css esto es lo que quieres.

    • Esta respuesta no es correcta – usted puede hacerlo sin JavaScript o elementos separados; ver la respuesta que he enlazado en el comentario a la pregunta.

Dejar respuesta

Please enter your comment!
Please enter your name here