Ontwerpen : Transparante afbeeldingen
Inhoud ]
Lynda Weinman

Transparantie imiteren

Van de twee gangbaarste grafische bestandsindelingen op het web, biedt alleen gif de mogelijkheid van transparantie. Dat is de reden waarom je gif-jes moet maken of hun transparantie moet imiteren om afbeeldingen met onregelmatige contouren te maken.



Afbeelding 1: Met en zonder transparantie: je ziet het verschil duidelijk!

In sommige gevallen is het het makkelijkst om transparantie te imiteren. Stel dat je de indruk wilt wekken dat een bepaalde vorm op het scherm drijft. Je hoeft dan alleen maar dezelfde achtergrondkleur toe te passen op je afbeelding als die je op de pagina hebt toegepast. Met deze techniek is de rechthoek waarin de afbeelding staat, niet meer zichtbaar.



Afbeelding 2: De afbeelding is een geheel met de pagina. Je ziet geen enkele rand!

Je kunt dit soort transparantie op twee manieren implementeren: via de code <BODY BACKGROUND...> en de bijbehorende kenmerken of via het paar <BODY BGCOLOR...>:

  • Voor het kenmerk BACKGROUND is het nodig dat je een andere kleine afbeelding maakt met dezelfde kleur als de achtergrond van je vorm (in dit geval is de naam van het bestand fondbleu.gif). De code die je gebruikt op je pagina komt op het volgende neer:

  • <BODY BACKGROUND="fondbleu.gif">
    <CENTER>
    <IMG SRC="cercle.gif">
    </CENTER>
    </BODY>

  • Als je het kenmerk BGCOLOR wilt gebruiken, hoef je alleen maar de kleur te selecteren die je als achtergrond voor de vorm wilt gebruiken, de bijbehorende hexadecimale code te achterhalen en het volgende stukje HTML-code aan je pagina toe te voegen:

  • <BODY BGCOLOR="#6699FF">
    <CENTER>
    <IMG SRC="cercle.gif">
    </CENTER>
    </BODY>

Browservoorkeuren. Als een bezoeker de instellingen van de browser wijzigt en zo de kleuren overschrijft die jij voor je document hebt gekozen, werkt het beoogde effect niet.

Deze methode werkt prima als je achtergrond maar een effen kleur is. Als je een achtergrond met tegels achter je afbeelding zet, doe je het effect te niet.



Afbeelding 3: Het effect werkt niet met een achtergrond met tegels

Zelfs als je hetzelfde patroon toepast op de achtergrond van je vorm, wordt dit niet uitgelijnd met de tegels van de achtergrond van je document. Dit komt omdat de uitlijning van de voorgrond afwijkt van die van de achtergrond. De eenvoudigste oplossing is in dit geval om echte transparantie te gebruiken in plaats van imitatie.