Header gestalten

[Auge]

Hallo

Du kannst mehrere Hintergrundbilder festlegen. Auch Gradienten gelten in CSS als Hintergrundbilder. Mit (teil-)transparenten Farbangaben im rgba- oder hsla-Format für den Gradienten kannst du das dahinterliegende Bild durchscheinen lassen.

Da kocht dann die GPU.

Mal unabhängig von Bernds Beispielseite, die momentan eine einfarbige, vollflächige Abdeckung zeigt, hieß es nicht immer, auch von dir, man solle so viel wie möglich an CSS delegieren?

Sinnvoller ist es, das Bild doch eben im Grafikprogramm entsprechend zu bearbeiten. Insbesondere für mobile Geräte mit nicht so viel Rechenleistung.

Für die mittlerweile eingefügte vollflächige Abdunklung trifft das wohl zu. Bei der Abdunklung des Hintergrunds eines im fraglichen bereich liegenden Elements (hier z.B. der navigation) würde ich dennoch auf CSS-Gradient setzen. Der passt halt immer zur abzudeckenden Fläche.

Übrigens, wie sähe der Rechenaufwand mit einer teiltransparenten Pixelgrafik statt eines CSS-Gradienten aus?

Tschö, Auge