DIV boîte transparente, le texte à l'intérieur n'est pas transparent

J'ai un div de la boîte avec du texte à l'intérieur (et c'est censé être une barre de navigation).La div zone est défini à l'opacité de 0,4, et est donc le texte automatiquement. Je veux que le texte soit normal opacité (non transparent), mais je ne peux pas comprendre comment le faire. Est-il possible de faire un div transparent/faible opacité, mais de garder le texte à l'intérieur non? J'ai cherché et essayé, mais rien ne semble fonctionner.

HTML

<div class="finboks">
           <br><br> 
              <li><font size="3px"><a href="index.html">HEIM</a></font></li>
              <li><font size="3px"><a href="elevane.html">ELEVANE</a></font></li>
              <li><font size="3px"><a href="tilsette.html">TILSETTE</a></font></li>
              <li><font size="3px"><a href="Bilete.html">BILETE</a></font></li>
              <li><font size="3px"><a href="kontakt.html">KONTAKT</a></font></li>
              <li><font size="3px"><a href="omskulen.html">OM SKULEN</a></font></li>

              <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
                <option> LENKJER </option>
                <option value="https://fronter.com/sognfjordanegs/index.phtml">Fronter</option>
                <option value="https://www.gaular.kommune.no/Filnedlasting.aspx?MId1=39&amp;FilId=335">Skuleruta 2012-13</option>
              </select>
            </ul>
          </div>

CSS

div.finboks{
position: absolute; 
width: 1349px;  
height: 115px; 
opacity: 0.4; 
z-index: 2; 
left: 5px;
top: 102px;
background-color: #FFFFFF;
}
background-color:rgba(255,255,255,0.4), mais c'est pour IE>=9.
double possible de comment ne pas s'appliquer l'opacité de l'élément enfant?
background-color:rgba(255,255,255,0.4).

OriginalL'auteur user2385120 | 2013-05-15

  1. 9

    Vous pouvez utiliser background-color:rgba(255,255,255,.4); pour cette

    Correction ici : jsFiddle

    Pour ie la solution est : 

    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);/*IE fix */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);     /* IE Fix */

    Ici un générateur pour que: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

    Ce travail tous les navigateurs, ie5/6/7 etc...

    OriginalL'auteur artSx

  2. 0

    L'astuce que j'utilise est d'avoir deux divs - l'un pour le fond et un pour le texte.

    <div class="finboksBackground"></div>
<div class="finboks">
           <br><br> 
              <li><font size="3px"><a href="index.html">HEIM</a></font></li>
              <li><font size="3px"><a href="elevane.html">ELEVANE</a></font></li>
              <li><font size="3px"><a href="tilsette.html">TILSETTE</a></font></li>
              <li><font size="3px"><a href="Bilete.html">BILETE</a></font></li>
              <li><font size="3px"><a href="kontakt.html">KONTAKT</a></font></li>
              <li><font size="3px"><a href="omskulen.html">OM SKULEN</a></font></li>

              <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
                <option> LENKJER </option>
                <option value="https://fronter.com/sognfjordanegs/index.phtml">Fronter</option>
                <option value="https://www.gaular.kommune.no/Filnedlasting.aspx?MId1=39&amp;FilId=335">Skuleruta 2012-13</option>
              </select>
            </ul>
          </div>

    css: 

    div.finboks {
    position: absolute; 
    width: 1349px;  
    height: 115px; 
    z-index: 2; 
    left: 5px;
    top: 102px;
}

div.finboksBackground {
    position: absolute; 
    width: 1349px;  
    height: 115px; 
    opacity: 0.4; 
    z-index: 2; 
    left: 5px;
    top: 102px;
    background-color: #FFFFFF;
}

    Il y a d'autres plus propres solutions, mais je ne crois pas qu'aucun d'entre eux travaillent comme fiable de la croix-navigateur.

    OriginalL'auteur Rob Johnstone