Websites met stijl

26. Afbeeldingen met transparantie

De achtergrond ('sterrenhemel')

De achtergrond van de Apollo-website is een foto van de sterrenhemel.

• In het stijlblad staan in body de twee eigenschappen voor de achtergrond: background: black url("../afbeeldingen/galaxy.gif") no-repeat fixed;
  background-size: cover;
• De eerste regel zorgt ervoor dat de afbeelding wordt geplaatst
  • zonder herhaling (no-repeat)
  • en vast (fixed, scrollt niet mee)
    Dat is wat je van een sterrenhemel verwacht!
• De tweede regel zorgt ervoor dat de afbeelding het hele scherm vult.

Transparantie

In de website van het Apolloproject lijkt de foto met de astronauten geen rechthoek te zijn. Dat is bereikt door een deel van de foto transparant te maken.

• In figuur 1 is de linker foto de oorspronkelijke foto
• In de rechter foto is de kleur zwart transparant gemaakt.

Trasparantie instellen

In de meeste fotobewerkingsprogramma kan je de transparantie instellen.
In Photofiltre, het gratis fotobewerkingsprogramma dat ik gebruik en ook aanbeveel, gaat dat als volgt: figuur 2

• Kies uit het menu [Afbeelding] > [Transparantie kleur....]
  Zie de linker afbeelding van figuur 2
• Dan verschijnt het dialoogvenster 'Transparantie kleur' (rechts in figuur 2)
  • Bovenin dat dialoogvenster staat de kleur die transparant wordt.
    (Als dat niet de kleur is die je transparant wilt maken wijs je met de muis in de afbeelding de kleur aan die je transparant wilt maken.)
  • Met de schuif 'Tolerantie' kan je instellen of alleen de ingestelde kleur transparant wordt of ook kleuren die daar op lijken.
  • Klik op OK

Over Photofiltre:

• Op deze site staat hoe je Photofiltre kunt installeren (via Programma's > Photofiltre - installeren.)
• Meer info over transparantie vind je ook in de uitgebreide handleiding van Photofiltre - transparantie.

Experimenteren met de transparantie

Om beter te kunnen zien hoe transparantie werkt, kan je achtereenvolgens de volgende wijzigingen aanbrengen in het stijlblad apollo.css.

• In de stijlregels voor h1 staat de regel background: url("../afbeeldingen/apollo.png") no-repeat left bottom;
  Verander daar apollo.png in apollo11.png (apollo11.png is de afbeelding zonder transparantie.
  De regel is nu dus background: url("../afbeeldingen/apollo11.png") no-repeat left bottom;).

  Als je goed kijkt zie je nu dat er rond de maan geen sterren meer te zien zijn. Die worden bedekt door de zwarte achtergrond van de foto van de astronauten.

• Je kan de zwarte achtergrond van de afbeelding nog veel duidelijker zien door in het stijlblad in body de regel background: black url("../afbeeldingen/galaxy.jpg") no-repeat fixed; te veranderen in background: green;
  Hierdoor wordt de achtergrond van de website groen.
• Verander nu in h1 de regel background: url("../afbeeldingen/apollo11.png") no-repeat left bottom; weer terug in background: url("../afbeeldingen/apollo.png") no-repeat left bottom;. De transparantie van de afbeelding is terug.
• Verander tenslotte in body background: green; weer terug in background: black url("../afbeeldingen/galaxy.jpg") no-repeat fixed;.

  Nu is alles weer zoals het hoort.

Bestandsformaten

Afbeeldingen op internet worden bijna altijd opgeslagen in een van de formaten jpg, gif, png. Er zijn nog veel meer formaten, maar die kennen de meeste browsers niet of ze leveren te grote bestanden op. Welk formaat je het best kan gebruiken hangt af van de soort afbeelding.

Het gif formaat

• Extensie: .gif
• Maximaal aantal verschillende kleuren: 256
• Compressie: vast, zonder verlies in kwaliteit
• Animatie: ja
• Transparantie: ja
• Alfatransparantie: nee
• Bestandsgrootte: klein
• Speciaal geschikt voor: afbeeldingen met een beperkt aantal kleuren, zoals iconen, diagrammen, tekeningen met tekst

Het jpg formaat

• Extensie: .jpg of .jpeg
• Maximaal aantal verschillende kleuren: 16 miljoen
• Compressie: instelbaar, altijd enig verlies in kwaliteit
• Animatie: nee
• Transparantie: nee
• Alfatransparantie: nee
• Bestandsgrootte: klein afhankelijk van de compressie
• Speciaal geschikt voor: foto's

Het png formaat

• Extensie: .png
• Maximaal aantal verschillende kleuren: 16 miljoen
• Compressie: vast, zonder verlies in kwaliteit
• Animatie: nee
• Transparantie: ja
• Alfatransparantie: ja
• Bestandsgrootte: meestal iets groter, bij afbeelding met grote kleurvlakken juist klein
• Speciaal geschikt voor: foto's, foto's met transparantie

Toelichting

• Bij jpg kan de compressie (traploos) worden ingesteld tussen 100 (groot bestand en goede kwaliteit) en 10 (heel klein bestand en slechte kwaliteit). Ook bij 100 (beste kwaliteit) is er nog een klein verlies in details. Dit is bijna niet zichtbaar.
  
• Bij transparantie kan één kleur helemaap transparant worden gemaakt.
  Bij alfatransparantie kan een gedeelte van een afbeelding geheel of gedeeltelijk transparant worden gemaakt. Ook een verlopende transparantie is mogelijk.
• Gebruik je Photofiltre om een afbeelding te bewerken, dan is het handig om die afbeelding op te slaan in het eigen formaat (pfi). Daarin blijven alle eigenschappen van de afbeelding bewaard (zoals lagen, tranparantie). Voor de website sla je de afbeelding ook op in jpg, png of gif formaat.