Wie kombiniere ich ein Hintergrundbild und einen CSS3-Verlauf auf demselben Element?

Question

Wie verwende ich CSS3-Verläufe für meine Hintergrundfarbe und wende dann ein Hintergrundbild an, um eine Art leicht transparente Textur anzuwenden?

Answer 1

Mehrere Hintergründe!

Körper {
  Hintergrund: #eb01a5;
  Hintergrundbild: url("IMAGE_URL"); /* Ersatz */
  Hintergrundbild: url("IMAGE_URL"), lineares-Gradient(#eb01a5, #d13531); /* W3C */
}

Diese 2 Zeilen sind der Ersatz für jeden Browser, der keine Gradienten hat. Siehe Anmerkungen zum Stapeln von Bildern nur IE < 9 unten.

• Zeile 1 setzt eine einfarbige Hintergrundfarbe.
• Zeile 2 setzt das Hintergrundbild als Ersatz.

Die letzte Zeile setzt ein Hintergrundbild und einen Gradienten für Browser, die damit umgehen können.

• Zeile 3 ist für alle relativ modernen Browser.

Nahezu alle aktuellen Browser unterstützen mehrere Hintergrundbilder und css Hintergründe. Siehe http://caniuse.com/#feat=css-gradients für Browserunterstützung. Für einen guten Beitrag darüber, warum Sie keine mehreren Browserpräfixe benötigen, sehen Sie http://codepen.io/thebabydino/full/pjxVWp/

Schichtenspeicher

Es sollte beachtet werden, dass das zuerst definierte Bild oben im Stapel sein wird. In diesem Fall befindet sich das Bild oben auf dem Gradienten.

Für weitere Informationen über das Stapeln von Hintergründen siehe http://www.w3.org/TR/css3-background/#layering.

Nur Bilder stapeln (keine Gradienten in der Deklaration) Für IE < 9

IE9 und höher können Bilder auf die gleiche Weise stapeln. Sie könnten dies nutzen, um ein Gradientenbild für ie9 zu erstellen, aber persönlich würde ich das nicht tun. Es sollte jedoch beachtet werden, dass bei Verwendung nur von Bildern, ie < 9 die Ersatzanweisung ignorieren und kein Bild anzeigen wird. Dies passiert nicht, wenn ein Gradient enthalten ist. Um in diesem Fall ein einzelnes Ersatzbild zu verwenden, schlage ich vor, Paul Irish's wundervolles Bedingtes HTML-Element zusammen mit Ihrem Ersatzcode zu verwenden:

.lte9 #ziel{ Hintergrundbild: url("IMAGE_URL"); }

Hintergrundposition, Größe etc.

Weitere Eigenschaften, die auf ein einzelnes Bild angewendet werden können, können ebenfalls durch Kommas getrennt werden. Wenn nur 1 Wert angegeben wird, wird dies auf alle gestapelten Bilder einschließlich des Gradienten angewendet. Hintergrundgröße: 40px; wird sowohl das Bild als auch den Gradienten auf eine Höhe und Breite von 40px beschränken. Wenn Sie jedoch Hintergrundgröße: 40px, cover; verwenden, wird das Bild 40px und der Gradient wird das Element überdecken. Um eine Einstellung nur auf ein Bild anzuwenden, setzen Sie den Standard für das andere: Hintergrundposition: 50%, 0 0; oder für Browser, die es unterstützen verwenden Sie initial: Hintergrundposition: 50%, initial;

Sie können auch den Hintergrundkurzschluss verwenden, allerdings wird dadurch die Ersatzfarbe und das Ersatzbild entfernt.

Körper{
    Hintergrund: url("IMAGE_URL") kein-Wiederholung links oben, lineares-Gradient(#eb01a5, #d13531);
}

Das Gleiche gilt für background-position, background-repeat, etc.

Answer 2

Wenn Sie auch die Hintergrundposition für Ihr Bild festlegen möchten, können Sie dies verwenden:

background-color: #444; // fallback
background: url('PFAD-ZUM-BILD') center center no-repeat; // fallback

background: url('PFAD-ZUM-BILD') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PFAD-ZUM-BILD') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PFAD-ZUM-BILD') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PFAD-ZUM-BILD') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PFAD-ZUM-BILD') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

Sie können auch ein LESS-Mixin erstellen (Bootstrap-Stil):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Answer 3

Eine Sache, die man beachten sollte, ist, dass das zuerst definierte Hintergrundbild oben im Stapel liegt. Das zuletzt definierte Bild wird am unteren Ende liegen. Das bedeutet, um einen Hintergrundverlauf hinter einem Bild zu haben, würde man folgendes benötigen:

  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);
  }

Man könnte auch Hintergrundpositionen und Hintergrundgrößen für die Bilder definieren. Ich habe einen Blog-Beitrag über einige interessante Dinge zusammengestellt, die man mit CSS3-Verläufen machen kann

Answer 4

Sie könnten einfach eingeben :

Hintergrund: linearer Verlauf(
    nach unten,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Answer 5

Meine Lösung:

background-image: url(IMAGE_URL); /* Fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);