CSS3-Farbverläufe mit background-image oder background?
Geschrieben am:
Soll man für CSS3-Farbverläufe die Eigenschaft background-image oder background verwenden? Es funktioniert prinzipiell beides:
.beispiel { background-image: linear-gradient(red, yellow); }
aber auch
.beispiel { background: linear-gradient(red, yellow); }
Einen Fall gibt es allerdings, wo man besser zu background als zu background-image greift: Nämlich, wenn man einen Farbverlauf hat, der auf halbtransparente Farben über rgba() setzt, und außerdem eine Fallbackfarbe für ältere Browser angibt.
Im folgenden Beispiel geht der Farbverlauf von einem recht durchsichtigen Rot zu einem ganz opaken Rot.
.eins { background: red; -webkit-background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 1)); background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 1)); }
Verwendet man in diesem Fall hingegen background-image, so gilt die Hintergrundfarbe, die nur als Fallback gedacht war, natürlich ebenfalls für das Element und sieht hinter dem halbtransparenten Rot hervor. Das Ergebnis ist ein durchgängig roter Bereich:
/* nicht das gewünscht Ergebnis */ .zwei { background: red; /* scheint hinter dem Farbverlauf durch */ -webkit-background-image: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 1)); background-image: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 1)); }
Links Farbverlauf; rechts kein Farbverlauf beim Einsatz von background-image, weil background-color durchscheint
Also: background ist die richtige Wahl bei Farbverläufen, wenn man mit rgba() arbeitet und eine Fallbackfarbe definiert - Letzteres sollte man ja immer machen.