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

Wie verwende ich CSS3-Verläufe für meine background-colorund wende dann eine background-imagean, um eine Art leichte transparente 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 beiden Zeilen sind der Fallback für jeden Browser, der keine Farbverläufe ausführt. Siehe Hinweise zum Stapeln von Bildern nur IE <9 unten.

• Zeile 1 legt eine flache Hintergrundfarbe fest.
• Zeile 2 legt den Hintergrundbild-Fallback fest.

Die letzte Zeile legt ein Hintergrundbild und einen Farbverlauf für Browser fest, die damit umgehen können.

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

Fast alle aktuellen Browser unterstützen mehrere Hintergrundbilder und CSS-Hintergründe. Informationen zur Browserunterstützung finden Sie unter http://caniuse.com/#feat=css-gradients . Einen guten Beitrag dazu, warum Sie nicht mehrere Browserpräfixe benötigen, finden Sie unter http://codepen.io/thebabydino/full/pjxVWp/.

Ebenenstapel

Es ist zu beachten, dass sich das erste definierte Bild am obersten im Stapel befindet. In diesem Fall befindet sich das Bild oben auf dem Farbverlauf.

Weitere Informationen zum Hintergrund-Layering finden Sie unter http://www.w3.org/TR/css3-background/#layering .

NUR Bilder stapeln (keine Farbverläufe in der Deklaration) Für IE <9

IE9 und höher können Bilder auf dieselbe Weise stapeln. Sie könnten dies verwenden, um ein Verlaufsbild für ie9 zu erstellen, obwohl ich persönlich dies nicht tun würde. Beachten Sie jedoch, dass bei Verwendung nur von Bildern, dh <9, die Fallback-Anweisung ignoriert wird und kein Bild angezeigt wird. Dies ist nicht der Fall, wenn ein Farbverlauf enthalten ist. Um in diesem Fall ein einzelnes Fallback-Bild zu verwenden, empfehle ich die Verwendung des wunderbaren bedingten HTML-Elements von Paul Irish zusammen mit Ihrem Fallback-Code:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Hintergrundposition, Größe usw.

Andere Eigenschaften, die für ein einzelnes Bild gelten würden, können ebenfalls durch Kommas getrennt sein. Wenn nur 1 Wert angegeben wird, wird dieser auf alle gestapelten Bilder einschließlich des Verlaufs angewendet. background-size: 40px;beschränkt sowohl das Bild als auch den Farbverlauf auf 40 Pixel Höhe und Breite. background-size: 40px, cover;Wenn Sie jedoch verwenden, wird das Bild 40px groß und der Farbverlauf deckt das Element ab. Um eine Einstellung nur auf ein Bild anzuwenden, legen Sie die Standardeinstellung für das andere fest: background-position: 50%, 0 0;oder für Browser, die dies unterstützen, verwenden Sie initial:background-position: 50%, initial;

Sie können auch die Hintergrundkürzel verwenden, dies entfernt jedoch die Fallback-Farbe und das Bild.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Gleiches gilt für Hintergrundposition, Hintergrundwiederholung usw.

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

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

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

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

#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
    }
}

Zu erkennen ist, dass das erste definierte Hintergrundbild ganz oben im Stapel liegt. Das zuletzt definierte Bild ist das unterste. Das heißt, um einen Hintergrundverlauf hinter einem Bild zu haben, benötigen 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 definieren. Ich habe einen Blog-Beitrag über einige interessante Dinge zusammengestellt, die Sie mit CSS3-Verläufen tun können

Sie können einfach Folgendes eingeben:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Ich benutze immer den folgenden Code, damit es funktioniert. Es gibt einige Hinweise:

1. Wenn Sie die Bild-URL vor dem Verlauf platzieren, wird dieses Bild erwartungsgemäß über dem Verlauf angezeigt .

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}

<div class="background-gradient"></div>

2. Wenn Sie einen Farbverlauf vor der Bild-URL platzieren, wird dieses Bild unter dem Farbverlauf angezeigt .

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}

<div class="background-gradient"></div>

Diese Technik ist genau die gleiche, da wir mehrere Hintergrundbilder haben, wie hier beschrieben

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

Ich hatte eine Implementierung, bei der ich diese Technik noch einen Schritt weiter gehen musste, und wollte meine Arbeit skizzieren. Der folgende Code macht dasselbe, verwendet jedoch SASS, Bourbon und ein Bildsprite.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS und Bourbon kümmern sich um den Cross-Browser-Code, und jetzt muss ich nur noch die Sprite-Position pro Schaltfläche deklarieren. Es ist einfach, dieses Prinzip für die aktiven Schaltflächen und den Schwebezustand zu erweitern.

Wenn Sie beim Herunterladen von Hintergrundbildern seltsame Fehler haben, verwenden Sie den W3C Link Checker: https://validator.w3.org/checklink

Hier sind moderne Mixins, die ich verwende (Credits: PSA: Verwenden Sie keine Gradientengeneratoren ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

Hier ist ein MIXIN, das ich erstellt habe, um alles zu handhaben, was die Leute gerne benutzen würden:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Dies kann wie folgt verwendet werden:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Hoffe ihr findet das hilfreich.

Dank an @Gidgidonihah für die Suche nach der ersten Lösung.

Ich habe versucht, das Gleiche zu tun. Während Hintergrundfarbe und Hintergrundbild auf getrennten Ebenen innerhalb eines Objekts existieren - was bedeutet, dass sie nebeneinander existieren können - scheinen CSS-Verläufe die Hintergrundbildebene zu kooptieren.

Soweit ich das beurteilen kann, scheint das Rahmenbild eine breitere Unterstützung zu haben als mehrere Hintergründe. Vielleicht ist das also ein alternativer Ansatz.

http://articles.sitepoint.com/article/css3-border-images

UPDATE: Ein bisschen mehr Forschung. Petra Gregorova scheint hier etwas zu arbeiten -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Sie können mehrere Hintergründe verwenden: linear-gradient (); Anrufe, aber versuchen Sie dies:

Wenn Sie möchten, dass die Bilder vollständig miteinander verschmolzen werden, ohne dass die Elemente aufgrund separater HTTP-Anforderungen separat geladen werden, verwenden Sie diese Technik. Hier laden wir zwei Dinge auf dasselbe Element, die gleichzeitig geladen werden ...

Stellen Sie einfach sicher, dass Sie Ihr vorgerendertes 32-Bit-transparentes PNG-Bild / Ihre Textur zuerst in einen Base64-String konvertieren und es im CSS-Aufruf des Hintergrundbilds verwenden (in diesem Beispiel anstelle von INSERTIMAGEBLOBHERE).

Ich habe diese Technik verwendet, um eine Wafer-aussehende Textur und andere Bilddaten zu verschmelzen, die mit einer Standard-CSG-Regel für RGBA-Transparenz / linearen Gradienten serialisiert wurden. Funktioniert besser als das Überlagern mehrerer Grafiken und das Verschwenden von HTTP-Anforderungen, was für Mobilgeräte schlecht ist. Alles wird clientseitig geladen, ohne dass ein Dateivorgang erforderlich ist, erhöht jedoch die Größe des Dokumentbytes.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

Wenn in IE 9 (HTML 5 und HTML 4.01 Strict) Farbverläufe und Hintergrundbilder zusammenarbeiten müssen, fügen Sie Ihrer CSS-Klasse die folgende Attributdeklaration hinzu, und dies sollte den Trick ausführen:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Beachten Sie, dass Sie das filterAttribut verwenden und dass zwei progid:[val]durch Komma getrennte Instanzen vorhanden sind, bevor Sie den Attributwert mit einem Semikolon schließen. Hier ist die Geige . Beachten Sie auch, dass sich der Farbverlauf beim Betrachten der Geige über die abgerundeten Ecken hinaus erstreckt. Ich habe keine Lösung für diesen anderen, der keine abgerundeten Ecken verwendet. Beachten Sie außerdem, dass bei Verwendung eines relativen Pfads im Attribut src [IMAGE_URL] der Pfad relativ zur Dokumentseite und nicht zur CSS-Datei ist (siehe Quelle ).

Dieser Artikel ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) hat mich zu dieser Lösung geführt. Es ist ziemlich hilfreich für IE-spezifisches CSS3.

Ich wollte eine Span-Schaltfläche mit einer Kombination aus Hintergrundbild und Hintergrundverlauf erstellen.

http://enjoycss.com/ half mir bei meiner Arbeitsaufgabe. Nur ich muss einige automatisch generierte zusätzliche CSS entfernen. Aber es ist wirklich eine schöne Seite, auf der Sie Ihre Scratch-Arbeit erstellen können.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

Ich löse das Problem auf diese Weise. Ich definiere Gradient in HTML und Hintergrundbild im Body

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

Für mein ansprechendes Design akzeptierte mein Abwärtspfeil auf der rechten Seite der Box (vertikales Akkordeon) den Prozentsatz als Position. Anfangs war der Abwärtspfeil "Position: absolut; rechts: 13px;". Mit der 97% -Positionierung funktionierte es wie folgt:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Entschuldigung, ich weiß nicht, wie ich mit den Filtern umgehen soll.

Als sichere Methode können Sie einfach ein Hintergrundbild mit einer Größe von beispielsweise 500 x 5 Pixel erstellen css:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Wobei xxxxxxentspricht der Farbe, die der endgültigen Verlaufsfarbe entspricht.

Sie können dies auch am unteren Bildschirmrand korrigieren und an die anfängliche Verlaufsfarbe anpassen.