Hintergrundbilder, die man zur optischen Unterscheidung von einzelnen Seiten benutzt, sind nichts neues. Mich stö¶rt jedoch meist, wenn ich mehrere Grafiken einbinden muss, da jede Seite ihre eigene Gestaltung erhalten soll. Da lö¤dt der Besucher dann fö¼r jede Seite ein neues Bild Á€“ so kommen in der Summe mehrere Hundert KB zusammen. Besonders ö¤rgerlich ist das Nutzen von einem Bild mit verschiedenen Farben/Nuancen. Da helfen CSS Filter Effects Diese bieten per CSS gute Mö¶glichkeiten, Elemente direkt im Browser zu verö¤ndern. Das wirkt sich natö¼rlich auch auf Hintergrundbilder aus, da der Filtereffekt auf dem gesamten Element greift. Aktuell verfö¼gbar und fö¼r unsere Zwecke interessant sind folgende Effekte: blur brightness contrast drop-shadow grayscale hue-rotate invert opacity sepia Welcher Browser das unterstö¼tzt, steht hier: Can I use CSS Filter Effects? Ratsam ist es die Webkit-Browser noch ein wenig anzustubsen, also das -webkit-Prö¤fix zu verwenden. In meinem Fall hatte ich ein Hintergrundbild, das eigentlich auf allen Seiten zum Einsatz kommt, nur eben im Pressebereich sollte es andersfarbig sein. Am besten in Schwarz-WeiöŸ bzw. Graustufen. Das geht mit…
