Wie verwende ich CSS3-Verläufe für meine "Hintergrundfarbe" und wende dann ein "Hintergrundbild" an, um eine Art von heller, transparenter Textur anzuwenden?
Mehrere Hintergründe!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Diese 2 Zeilen sind der Fallback für jeden Browser, der keine Farbverläufe unterstützt. Siehe Hinweise zum Stapeln von Bildern nur IE < 9 unten.
Die letzte Zeile legt ein Hintergrundbild und einen Farbverlauf für Browser fest, die damit umgehen können.
Fast alle aktuellen Browser bieten Unterstützung für mehrere Hintergrundbilder und CSS-Hintergründe. Siehe http://caniuse.com/#feat=css-gradients für Browserunterstützung. Einen guten Beitrag darüber, warum Sie nicht mehrere Browser-Präfixe benötigen, finden Sie unter http://codepen.io/thebabydino/full/pjxVWp/
Ebenenstapel
Es ist zu beachten, dass das erste definierte Bild im Stapel ganz oben steht. In diesem Fall befindet sich das Bild oben auf dem Farbverlauf.
Weitere Informationen über Hintergrundebenen finden Sie unter http://www.w3.org/TR/css3-background/#layering.
Nur Bilder stapeln (keine Farbverläufe in der Erklärung) Für IE < 9
IE9 und höher können Bilder auf die gleiche Weise stapeln. Sie können dies verwenden, um ein Bild mit Farbverlauf für IE9 zu erstellen, obwohl ich persönlich das nicht tun würde. Zu beachten ist jedoch, dass der IE < 9 die Fallback-Anweisung ignoriert und kein Bild anzeigt, wenn nur Bilder verwendet werden. Dies ist nicht der Fall, wenn ein Farbverlauf enthalten ist. Um in diesem Fall ein einzelnes Fallback-Bild zu verwenden, schlage ich vor, das wunderbare Conditional HTML element von Paul Irish zusammen mit Ihrem Fallback-Code zu verwenden:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Hintergrundposition, Größe etc.
Andere Eigenschaften, die für ein einzelnes Bild gelten würden, können ebenfalls durch Kommata getrennt werden. Wird nur 1 Wert angegeben, so wird dieser auf alle gestapelten Bilder einschließlich des Farbverlaufs angewendet. Die Angabe background-size: 40px;
beschränkt sowohl das Bild als auch den Farbverlauf auf 40px Höhe und Breite. Wenn Sie jedoch background-size: 40px, cover;
verwenden, wird das Bild 40px groß und der Farbverlauf bedeckt das Element. Um eine Einstellung nur auf ein Bild anzuwenden, setzen Sie den Standard für das andere Bild: Hintergrund-Position: 50%, 0 0;
oder für [Browser, die es unterstützen] (http://caniuse.com/#feat=css-initial-value) verwenden Sie initial
: background-position: 50%, initial;
Sie können auch das Hintergrundkürzel verwenden, allerdings werden dadurch die Fallback-Farbe und das Bild entfernt.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Das Gleiche gilt für background-position, background-repeat, etc.
Dabei ist zu beachten, dass das erste definierte Hintergrundbild ganz oben im Stapel liegt. Das zuletzt definierte Bild wird ganz unten stehen. Das heißt, um einen Hintergrundverlauf hinter einem Bild zu haben, müssten Sie:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
Sie können auch Hintergrundpositionen und Hintergrundgröße für die Bilder festlegen. Ich habe einen Blog-Beitrag über einige interessante Dinge zusammengestellt, die man mit CSS3-Verläufen machen kann.
Ich habe versucht, das Gleiche zu tun. Während Hintergrundfarbe und Hintergrundbild auf separaten Ebenen innerhalb eines Objekts existieren - was bedeutet, dass sie nebeneinander existieren können - scheinen CSS-Verläufe die Hintergrundbildebene zu übernehmen.
Soweit ich das beurteilen kann, scheint border-image eine breitere Unterstützung zu haben als mehrere Hintergründe, also ist das vielleicht ein alternativer Ansatz.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: Ein bisschen mehr Recherche. Es scheint, dass Petra Gregorova hier etwas hat, das funktioniert --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html