Achtergrondkleur passend bij afbeelding
De mogelijkheid om afbeeldingen dynamisch te vergroten/verkleinen biedt een leuke manier om afbeeldingen automatisch te voorzien van een passende achtergrondkleur. Zie
Elke afbeelding is origineel 800x600 groot. Door elke url vooraf te laten gaan met 200x150 worden ze kleiner gemaakt. Elke afbeelding wordt omgeven door een DIV met een padding van 20px met als achtergrond (background) dezelfde afbeelding met een formaat van 1x1. Door het verkleinen van de afbeelding tot 1x1 krijgt het automatisch de kleur van het gemiddelde van alle kleuren.
Voorbeeld HTML-code:
<div style="padding: 20px; background: url(/1x1/vormgeving/images/voorbeelden/winter.jpg)">
<img src="/200x150/vormgeving/images/voorbeelden/winter.jpg">
</div>