DIV box transparent, text inside not transparent

Question

I have a div box with text inside (and this is supposed to be a navbar).The div box is set to opacity 0.4, and so is the text automatically also. I want the text to be normal opacity (not transparent), but i can't figure out how to do that. Is it possible to make a div transparent/low opacity but keep the text inside not? I have searched and tried, but nothing seems to work.

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)`, but that's for IE>=9. — Passerby, May 15 '13 at 10:12
possible duplicate of [how to not apply opacity for child element?](http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element) — dsgriffin, May 15 '13 at 10:12

score 9 · Answer 1 · answered May 15 '13 at 10:19

You can use background-color:rgba(255,255,255,.4); for this

Correction here : jsFiddle

For ie the fix is :

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

Here one generator for that: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

This work all browser, ie5/6/7 etc...

score 0 · Answer 2 · answered May 15 '13 at 10:22

The trick I use is to have two divs - one for the background and one for the text.

<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;
}

There are other neater solutions but I don't think any of them work as reliably cross-browser.

DIV box transparent, text inside not transparent

2 Answers2