[CSS] Opacity and Opaque children*

[Jesse99]

'k zal wel niet de eerste zijn die 't vraagt, en ook op Google vind ik over dit onderwerp een heleboel informatie. Wat ik wil is dus een half transparante cel van een tabel, maar een 100% opaque inhoud. En nu komt 't, dit zou in alle moderne browsers moeten werken: IE 6.x, 7.x, 8.x, FireFox 3.x, Opera 9.x, Google Chrome 2.x...

Ik weet dat ik waarschijnlijk veel vraag, maar ik geef het nog niet op. Momenteel gebruik ik de opacity settings voor de semi-transparante achtergrond, en dat werkt in alle browsers prima.
Om de tekst 100% opaque te maken gebruik ik "position: relative" maar dat werkt schijnbaar alleen in IE.

'k Verwacht geen kant-en-klare oplossingen en Googlen kan ik zelf ook, kan alleen maar hopen dat misschien iemand een duwtje in de juiste richting kan geven, of het zelf al klaargespeeld heeft...?

Dit is wat ik momenteel heb voor de betreffende cel:

code:

<td width="180" style="background-color: #000000; filter:alpha(opacity=50); opacity:.50; -moz-opacity:.50; -khtml-opacity:.50">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td style="background-color: transparent"><span style="position: relative">Dit is de opaque inhoud van de cel<br /></span></td>
      </tr>
    </table>
</td>

[disjfa]

Kan je dan niet gemakkelijker een halftransparante pgn gebruiken. Werkt mischien nog niet in IE (<8 ?)

[BtM909]

Oftewel je wilt dit bereiken: Pure CSS opacity and how to have opaque children?

edit:

Opacity wordt in de praktijk altijd geinherit door de childs. Door de Opacity op een lager gelegen element te plaatsen, haal je de child eigenlijk los van de parent

[ Voor 34% gewijzigd door BtM909 op 22-05-2009 12:31 ]

[Spinal]

Een halftransparante png lijkt me ook de makkelijkste oplossing. Werkt niet in IE6, maar dat is met een scriptje op te lossen.
Jouw voorstel werkt inderdaad alleen in IE8 (getest in Opera 10, FF3, Chrome en Safari. IE7 niet getest)

[ Voor 0% gewijzigd door Spinal op 22-05-2009 12:29 . Reden: spuit 11 :( ]

[Jesse99]

Transparante png is helaas ook niet overal door ondersteund...

BtM909 dat artikel is wel erg interessant, daar zie ik wel mogelijkheden in. Ik ga eens proberen een aparte cel met en zonder transparantie te gebruiken, waarbij die zonder (met de inhoud) een relatieve positie over de transparante krijgt... Volgens mij zou dat wel eens kunnen werken

[Edit]
Nu ben ik even helemaal de weg kwijt. De code in dat artikel zag er logisch uit, en het voorbeeld werkte ook gewoon in alle browsers. Perfect dus! Maar om een of andere reden werkt 't met m'n eigen site dus niet, de 2de div block met de content en relatieve positie maakt de onderliggende 100% transparant

[Edit 2]
Okee het probleem is dus dat ik met cellen/blokken werk die geen vaste grootte hebben. De achterliggende cel met de semi-transparante achtergrond heeft geen content, dus ook geen grootte. Nu kan ik daar dezelfde content (uit een database) wel ingooien als de voorgrond, maar dan nog is die nét niet groot genoeg...
Jammer genoeg kan ik hem niet met 100% width en height de maximale grootte laten aannemen van z'n parent... Ach, zo heeft 'n mens eens wat te doen

[ Voor 57% gewijzigd door Jesse99 op 22-05-2009 13:47 ]