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

1250

Wie verwende ich CSS3-Verläufe für meine background-colorund wende dann eine background-imagean, um eine Art leichte transparente Textur anzuwenden?

Ronald
quelle
9
Hinweis: Sie können das Hintergrundbild auch auf diese Weise positionieren (15px Mitte) oder die Eigenschaft 'Wiederholen' festlegen (Beispiel funktioniert für Firefox 3.6+) .some-class {background: url ("../ icon.png") no- Wiederholen Sie 15px Mitte, -moz-linear-Gradient (Mitte oben, #FFFFFF, #DDDDDD);}
Julien Bérubé
SVG oder SVG + CSS können verwendet werden, um flache Texturen (Rauschen) bzw. strukturierte Verläufe zu erstellen.
Clint Pachl

Antworten:

1544

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.

Gidgidonihah
quelle
36
Vielen Dank für Ihre Antwort. Haben Sie Ideen, wie Sie dann background-positionnur das Bild und nicht den Farbverlauf steuern können ?
Adardesign
44
danke dafür, ausgezeichnete informationen. | @adardesign: Verwenden Sie die Hintergrundkürzel. Wenn Sie das obige Beispiel ändern, wäre dies: Hintergrund: URL (IMAGE_URL) keine Wiederholung links oben, [entsprechender Farbverlauf];
RussellUresti
14
@adardesign: background: url ("../ images / icon.png") 15-Pixel-Mitte ohne Wiederholung, -moz-linearer Farbverlauf (Mitte oben, #FFFFFF, #DDDDDD); / * 15px-Mitte beachten, wird hinzugefügt eine 15px linke Polsterung und vertikal in der Mitte die icon.png * /
Julien Bérubé
2
In Chrome atleast können Sie die Hintergrundposition für mehrere Bilder mithilfe des Komas zum Trennen von Werten steuern. So .. Hintergrundposition: 0px 8px, 0px 0px ...
Orlando
1
Es ist wahrscheinlich auch erwähnenswert, dass Sie, wenn Sie die Positionierung anderer Attribute des Bildes festlegen müssen, die Hintergrund-CSS-Eigenschaften später in der CSS-Regel verwenden können. ZB: Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 1300px 1303px;
Phill Healey
86

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
    }
}
Tamás Pap
quelle
Der einzige auf dieser Seite, der für mich funktioniert hat. Ich habe es allerdings mit normalem CSS verwendet. Alle anderen, die ich versuchte, versteckten das Bild tatsächlich mit der Farbe des Überlagerungsverlaufs.
Ska
@Ska - Kehren Sie dann einfach die Reihenfolge um. Der Z-Index funktioniert hier umgekehrt. Siehe stackoverflow.com/questions/14915542/… .
Frank Conijn
46

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

Robert
quelle
2
Die Antwort wäre noch besser, wenn die W3C-Standardnotation am Ende steht.
Volker E.
4
Dieser Code scheint nicht richtig zu funktionieren. Wir können nur das stackOverflow-Bild sehen, nicht das Hintergrundbild dahinter / davor.
Oder A.
Ich denke, -webkit-gradient könnte veraltet sein stackoverflow.com/questions/10683364/…
alpalalpal
Der Code funktioniert möglicherweise nicht, aber dies ist ein sehr wichtiger Punkt. Sie können die Funktionsweise der Hintergrundelemente neu anordnen, müssen jedoch daran denken, dass sie überlagert sind. Wenn Sie den Farbverlauf über dem Bild haben möchten, setzen Sie ihn an die erste Stelle und Sie möchten uns wahrscheinlich RGBa, damit Sie das Bild dahinter sehen können:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
Serraosays
34

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

Nejmeddine Jammeli
quelle
1
Dies war die einzige Lösung, die für mich funktioniert hat (Firefox v57). Das linear-gradient()musste vor dem kommen url(), und teilweise Transparenz musste für die Verlaufsfarben verwendet werden, mit rgba(). Bei allem anderen wurde einfach die erste Definition in der Liste verwendet (als wäre die zweite ein Fallback, ähnlich wie font-familyDeklarationen funktionieren).
Waldyrious
@waldyrious Hinweis, dass der Benutzer eine Art helle transparente Textur auf den linearen Verlauf anwenden möchte, so dass das Bild an erster Stelle stehen sollte, da es über dem Verlauf gerendert werden sollte
Alex Guerrero
Das Zusammensetzen eines Bildes und eines Verlaufs über Halbtransparenz sollte den gleichen Effekt haben, unabhängig davon, welches vor Ihnen liegt. Sie können Ihre Farbverläufe jedoch immer so definieren, dass sie transparent sind. Bilder, die noch nicht halbtransparent sind, können jedoch nicht einfach / dynamisch konvertiert werden, um auf diese Weise verwendet zu werden. Deshalb finde ich den Ansatz, den Gradienten an die erste Stelle zu setzen, allgemeiner nützlich.
Waldyrious
21

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>

  1. 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

trungk18
quelle
Großartig! Ich fette dies -> Wenn Sie einen Farbverlauf vor die Bild-URL setzen, wird dieses Bild unter dem Farbverlauf angezeigt.
Aldyahsn
19

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);
Francesco Borzi
quelle
3
Diese Lösung funktioniert in meinem Fall, wenn Verlaufsanzeigen über dem Bild angezeigt werden, andernfalls wird sie vom Bild ausgeblendet.
VizFlux
15

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.

Coreballs
quelle
5

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);
}
Mateusz
quelle
4

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.

lukehillonline
quelle
3

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

Alex
quelle
2

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");
 }
Paul Latour
quelle
0

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.

KSev
quelle
0

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;
}
Chatura Dinesh Halwatura
quelle
0

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

vander2000
quelle
0

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.

Mugé
quelle
-1

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.

Epicus
quelle
1
-1 weil: Zum einen ist "background-img" keine gültige CSS-Regel. Zum anderen beantwortet dies die Frage nicht wirklich.
Chris Browne