Opacity fix?

4 svar · 624 visningar · startad av Frexuz 8 apr. 2008

FrexuzMedlem sedan maj 2003138 inlägg

Frågan8 apr. 2008 08:08#1

<div id="userBox" class="transON">
    <div class="transOFF">
        ....lite bilder och text
    </div>
</div>

.transON {background-color: #FFFFFF; opacity:.65; filter: alpha(opacity=65); -moz-opacity: 0.65; }
.transOFF {opacity:1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}

Problem: Bilderna i diven får också opacity vilket jag inte vill, utan bara den vita bakgrunden i userBox (så att man ser loggan igenom)

Har provat att sätta .transOFF på varje bild också, men det händer inget.
Har också provat med och utan DXImageTransform på båda classerna

OBS. Bilderna i IE får ingen opacity

Hur kan jag fixa i FF?

Mattias NordinMedlem sedan dec. 20051 056 inlägg

15 sep. 2008 14:19#2

Hmmm.... googlar efter samma sak. Inga svar här?

dAEkMedlem sedan feb. 20041 816 inlägg

15 sep. 2008 21:04#3

Vill du inte att bilderna ska ärva opacity får du placera dem i en nod som inte ärver från ovan. I kodexemplet kommer alla noder som ligger i under userBox att få 0.6 som högsta opacity; 1.0 i div.transOFF är alltså 0.6.

empaempaMedlem sedan sep. 20083 inlägg

19 sep. 2008 13:52#4

Det här borde väl funka?
Du sätter en div som är relative, som har två divar under sig som är absolute.

<div class="container">     
<div class="transOn"></div>
<div class="userinfo">     
....lite bilder och text     
</div> 
</div>

.container { position: relative; }
.userinfo, .transON { position: absolute; top: 0; left: 0; width: 200px; }
.transON {
background-color: #FFFFFF; opacity:.65; filter: alpha(opacity=65); -moz-opacity: 0.65; 
}

dAEkMedlem sedan feb. 20041 816 inlägg

19 sep. 2008 17:37#5

Yep, det är ett rätt vanligt tillvägagångssätt. :)