Volledige versie bekijken : Transparency in CSS



Trax
17 September 2007, 16:14
Hey,

ik heb een table met een grote centrale td waar ik mijn content insteek. Nu heb ik de achtergrond hiervan een transparency gegeven waardoor alles wat ik er nu insteek (tekst, foto's,...) allemaal de transparency overneem. Mijn content is dus ook transparant geworden. Is er een manier waarop ik dit kan scheiden van elkaar?

Alvast bedankt!!

Jelle
18 September 2007, 00:26
Dat is nu juist het parent-child principe in HTML. Alle content van die td zal als child van zijn parent, de td, automatisch die opacity overerven.

Er zijn leuke JavaScript oplossingen (http://www.alistapart.com/stories/pngopacity/) voor, maar dat vind ik persoonlijk niet echt handig. Net zoals die JavaScripts om IE6 toch transparante PNG's te laten serveren.

Een andere oplossing is die content uit de td te halen, waardoor hij die opacity niet meer overerft. Of technisch: de child uit de parent halen en als lossstaande parent gaan gebruiken.
Met CSS is dit vrij gemakkelijk: je maakt twee div's (of td's in twee losstaande tabellen) en je positioneert die absoluut (http://www.handleidinghtml.nl/css/css-oud/position.htm#position) op dezelfde plaats (ben je niet thuis in CSS positionering, bekijk dan even de voorbeelden meer onderaan de Handleiding HTML pagina). Met het z-index element (http://www.handleidinghtml.nl/css/css-oud/position.htm#z-index) bepaal je vervolgens de overlappingsvolgorde.

In een basis codevoorbeeld wordt dit het volgende:

<div id="transparantediv" style="position: absolute; top: 60px; left: 20px; z-index: 10;"></div>

<div id="contentdiv" style="position: absolute; top: 60px; left: 20px; z-index: 20;">Hier komt al je content.</div>
De transparantie codes heb ik hier voor de gemakkelijkheid weggelaten en het gewoon aangeduid met de naam (id) van de div.

Trax
18 September 2007, 12:42
Merci voor uw uitleg, ik vreesde al dat er javascript aan te pas moest komen. kheb idd nu iets in elkaar gestoken met div's die elkaar overlappen, maar dat is echt niet mijn favorite manier van werken.

Thanks!