Cambiare l'opacità per div div in - è possibile? Come?

Question

ho ricevuto dal layout web designer, che contiene (sonda):

<div id="subMenuRow">
 <div id="subMenuRowHTML">
  <a href="/link">Link</a>
 </div>
</div>

e, rispettivamente, css per esso:

#subMenuRow{
        width: 900px;
        height: 40px;
        background: #000000;
        float: left;
        clear: both;
        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
}

Opacità è usato per fare barra trasparente per il menu html. Il problema è, che ogni testo compresi i collegamenti contiene trasparenza pure, che è molto inutile. Come evitare opacità per subMenuRowHTML?

Answer 1

In primo luogo non è necessario utilizzare -moz-opacity e -khtml-opacity più. Sono molto, molto vecchio.

Non v'è alcuna soluzione completamente supportata oggi. CSS3 RGBA risolve questo nei browser moderni, ma se è necessario supportare vecchi browser sarà necessario utilizzare png semi trasparente:

#subMenuRow { background: url(semi-trans.png); }

IE6 si degrada con grazia con questo:

* html #subMenuRow { background: url(full-opacity.gif); }

Ci sono anche opzioni facili per png trasparenza su IE6. Sta a voi.

Se si dispone di molti casi di opacity sul codice e non si vuole rovinare il vostro codice con * html ovunque è possibile utilizzare i commenti condizionali.

Answer 2

utilizzare un .png semi trasparente come immagine di sfondo:

css:

background: transparent url(/url/image.png) top left repeat;

Answer 3

Aggiungi:

#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}