Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DIV box transparent, text inside not transparent

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;
}
like image 565
user2385120 Avatar asked May 15 '13 10:05

user2385120


1 Answers

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...

like image 119
artSx Avatar answered Sep 30 '22 16:09

artSx