Die `background`-Eigenschaft in CSS kann durch Kommas getrennte Werte akzeptieren. „Mehrere“ Hintergründe, wenn Sie so wollen. Sie können sie auch als überlagerte Hintergründe betrachten, da sie eine Stapelreihenfolge haben. Wenn wir eine transparente Farbe über ein Bild legen, können wir dieses Bild „tönen“. Aber es ist nicht ganz so offensichtlich, wie man vielleicht vermutet.
Meine erste intuitive Vermutung, dies zu tun, wäre so:
/* Warning: this doesn't work */
.tinted-image {
background:
/* top, transparent red */
rgba(255, 0, 0, 0.25),
/* bottom, image */
url(image.jpg);
}Leider ist das nicht gültig. Ich bin mir nicht ganz sicher warum. Vor einiger Zeit, als ich auf Twitter darüber jammerte, erhielt ich eine Vielzahl von Ideen/Gründen/Ausreden. Keine davon überzeugte mich wirklich. Es stimmt zwar, dass man `background-color` nicht durch Kommas trennen kann, aber ich glaube nicht, dass das hier relevant ist, da ich die `background`-Kurzform durch Kommas trenne und nicht speziell `background-color` (ganz zu schweigen davon, dass die Reihenfolge der Werte andersherum funktioniert).
Ich vermute, der eigentliche Grund, warum das so entschieden wurde, ist, dass es für Autoren zu einfach wäre, es zu vermasseln. `background: green, url(image.jpg);` würde in gewissem Sinne „fehlschlagen“, da es den Hintergrund einfach grün überfluten würde. Das Erzwingen der Farbe als letzte macht die Farbe eher zu einem „Fallback“ als zu einer Schicht wie jede andere.
Leider können wir auch die Farbe nicht einfach unten belassen und die Deckkraft des Bildes anpassen, um etwas von dieser Farbe durchscheinen zu lassen, da `background-opacity` keine Sache ist. (Obwohl Sie es so ähnlich fälschen können.)
Es gibt jedoch einen Weg!
Anstatt eine transparente Füllfarbe mit rgba() oder hsla() zu verwenden, können wir einen Farbverlauf verwenden. Farbverläufe sind technisch gesehen `background-image`s und unterliegen daher nicht der Regel, dass sie nicht an erster Stelle (ganz oben) in der Stapelreihenfolge stehen können.
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}Siehe den Stift Getöntes Bild mit mehreren Hintergründen von Chris Coyier (@chriscoyier) auf CodePen
Hey, was funktioniert, funktioniert, oder?
Auf einem meiner letzten Pens (der featured wurde, danke Leute!) habe ich einen Trick angewendet, um das Vollbild-Hintergrundbild (mit einem Ihrer früheren Beiträge) teilweise transparent zu machen. Dies ermöglichte es mir, die Hintergrundfarbe der Seite zu ändern und den Eindruck zu erwecken, dass sich die Farbe des Bildes änderte. Ich schätze, das war sozusagen das Gegenteil von dem, was Sie oben getan haben. Das ist aber ein cooler Effekt, den werde ich mir für später merken, danke Chris.
Das funktioniert in den meisten neuen Browsern, aber was ist mit IE?
Und wie wäre es damit? http://codepen.io/NSDCars5/pen/nuzbI
Es funktioniert in IE ab Version 9.
Für IE 8 und ältere Versionen können Sie vielleicht etwas mit der Legacy-Filter-Eigenschaft machen.
Diese Technik in Ihrem Pen hat schon immer funktioniert, aber sie beruht auf Markup. Sie überlagern einfach Elemente übereinander. Die von Chris beschriebene Technik ist viel flexibler und erfordert keine Änderung des Markups.
Ist es nicht einfacher zu warten, indem man ein Pseudoelement verwendet? Dann hat es nichts mit der `background-image`-URL zu tun.
So etwas – http://codepen.io/anon/pen/lbfeC
Wissen Sie, diese Pseudoelement-Sache muss ich recherchieren. Ich habe davon gehört, aber sie nie benutzt (ich bin ziemlich neu in all diesen HTML+CSS-Dingen…).
@NSDCars5
Ich empfehle Ihnen wirklich, sich damit zu beschäftigen. Sie können damit einige wirklich schöne Tricks durchführen, ohne das HTML-Markup mit Elementen zu verschmutzen, die nur zur Dekoration dienen.
Ein gutes Beispiel ist die Antwort von „Niet the Dark Absol“ auf http://stackoverflow.com/questions/14387690/css-show-only-corner-border
Das mache ich: Ich verwende ein Pseudoelement, um einen Filter über Hintergründe/Bilder zu legen. `position: absolute` mit `top`, `bottom`, `left`, `right` alles auf 0 gesetzt. Dann verwende ich rgba, um die Farbe und Transparenz anzuwenden.
Das mag auf den ersten Blick wie eine gute Lösung erscheinen, aber es beginnt zu scheitern, wenn tatsächlich etwas im Container ist. Haben Sie Ideen, wie man es flexibler gestalten kann?
Beispiel
@Andrew Richardson
Hoppla, mein Fehler. Ich habe vergessen, `position: relative` zum Container hinzuzufügen.
Setzen Sie `position` auf `relative` und die Breite/Höhe des Pseudoelements auf 100 %.
@Andrew
Ich habe einen neuen Codepen erstellt.
http://codepen.io/anon/pen/EClfq
Ach ja, das ergibt Sinn. Dies ist vielleicht die vielseitigste Option, da Sie nur die Überlagerungsfarbe beliebig manipulieren können, während das Hintergrundbild erhalten bleibt. Danke!
Man könnte argumentieren, dass die Verwendung von Pseudoelementen zur Dekoration Ihre CSS-Wartung erschwert. Sie müssten Kommentare hinzufügen, wenn Sie in einem Team arbeiten. Die Verwendung mehrerer übereinander liegender Hintergrundbilder ist einfacher zu verstehen, alles an einem Ort und letztendlich weniger CSS zu warten und/oder kaputt zu machen. Denken Sie daran, Pseudoelemente fügen immer noch Elemente hinzu. Es ist nur so, dass der Browser sie erstellt.
Mehrere Hintergründe scheinen die sauberere Lösung zu sein.
Langfristig bedeutet weniger Code = wartungsfähigerer Code.
Diese Methode lässt sich auch leicht für nette Hover-Effekte anpassen.
.red:after{
background:rgba(25,55,0,0.2);
transition: background 200ms ease-out;
}
:hover.red:after{
background:rgba(25,34,23,0.5);
}
Die Verwendung von Pseudoelementen ist sicherlich clever, aber völlig unzugänglich. Sobald Sie Inhalte zum Element hinzufügen, wie Andrew Richardson es versucht hat, können Sie es nicht auswählen (es sei denn, Sie wählen alles aus – STRG+A).
Versuchen Sie, den Text in Ihrer Demo mit der Maus auszuwählen.
Stimme Armstrongest zu, mehrere Hintergründe sind einfach eine schlichtere Lösung.
Der Grund, warum Ihre ursprüngliche Syntax nicht funktioniert, ist, dass Sie eine `background-color` und eine `background-image` angeben und Bilder immer auf der Farbe gestapelt werden. Durch die Definition eines `linear-gradient` mit den gleichen Start-End-Stoppwerten erstellen Sie im Grunde ein Bild eines einfarbigen Blocks, auf dem die Hintergrundfarbe liegen kann.
Ich habe diesen gleichen Trick verwendet, um Beleuchtung in meinen CSS 3D Demos zu fälschen.
Ich glaube nicht, dass das richtig ist
Es ist nicht die Tatsache, dass der Hintergrund ein Bild oder eine Farbe ist, sondern die Stapelreihenfolge. Aber ja, der Gradient-Trick ist genau das, was ich hier präsentiert habe.
Ganz richtig: „Die Hintergrundfarbe, falls vorhanden, wird unter allen anderen Ebenen gemalt.“ (w3c).
Ich frage mich, wie die Gradientenmethode im Vergleich zur Generierung von semi-transparenten, getönten, mit Daten eingebetteten PNGs mit dem bevorzugten Framework abschneidet.
Beim Lesen des Backgrounds and Borders Module sieht es so aus, als wäre eine `background-color` nur dann gültig, wenn sie die letzte Eigenschaft in der Kurzdeklaration ist. Sie kann also immer nur als unterste „Schicht“ existieren – ich schätze, das dient dazu, die Syntax im Einklang mit CSS2 zu halten, das besagt: „Wenn das Bild verfügbar ist, wird es über der Hintergrundfarbe gerendert“
Ich denke, der Grund, warum man keine Hintergrundfarbe darüber legen kann, ist, dass es einfach nur eine Hintergrundfarbschicht gibt und diese immer ganz unten liegt. Mit anderen Worten, `background-color` gilt nicht pro Ebene, sondern einmal für den gesamten Stapel.
Oder im Code: Es ist nicht „background: farbe1 ebene1, farbe2 ebene2, farbe3 ebene3;“, sondern „background: ebene1, ebene2, ebene3 farbe;“.
Es ist schade, dass dies nicht mit CSS-Übergängen funktioniert – da die Farbe (wenn sie unterstützt würde).
Ich schätze, das ist eine Stimme für den Pseudoelement-Trick…. aber …
das würde eine Umrandung erfordern, um die Pseudoverkleidung zu dimensionieren.
Es könnte auch die Textauswahl beeinträchtigen…
so etwas wie das: http://codepen.io/anon/pen/CcyaD
Großartig! Wenn nur `linear-gradient` mit Übergängen verwendet werden könnte….
Was schlagen Sie vor?
In einigen Situationen gibt es eine Möglichkeit, wie lineare Farbverläufe übergehen können… naja, so ungefähr. Es funktioniert zwar nicht mit einem Bild darunter, aber hier ist ein Pen, der eine Möglichkeit zeigt, diesen Effekt zu erzielen.
http://codepen.io/garypaul/pen/iDcEx
Das ist tatsächlich cooler als ich dachte, weil man eine Farbverlaufstönung haben kann, anstatt nur eine Volltonfarbe. Jaaa!
Meine einzige Frage ist und ich gehe davon aus, kann dies mit Übergängen verwendet werden???
Da lineare Farbverläufe im Wesentlichen generierte Bilder sind, werden sie nicht übergehen. Sie könnten jedoch einen gewissen Effekt mit `background-position` erzielen.
Das kann einige ziemlich coole Effekte erzeugen
http://codepen.io/vobpler/full/aljwd
Eigentlich ziemlich cool, das ist es, was ich mir vorgestellt habe. Jetzt muss ich nur noch herausfinden, ob die Übergänge darauf angewendet werden können.
Das ist verdammt genial, yo!
Ich habe versucht, eine `transition-duration` hinzuzufügen, aber es schien nicht zu funktionieren. Ich glaube nicht, dass es Unterstützung für die Übergänge von Hintergrundbildern gibt, zumindest nicht in Chrome.
Leider können Farbverläufe nicht übergehen. :(
Sie können jedoch `background-position` übergehen lassen, um einen Farbverlauf in einen anderen zu verwandeln (visuell): http://codepen.io/chriscoyier/pen/JgrhE
@Beecher, @Jon Wiedmann und @Farax
Obwohl Sie die Farben eines Farbverlaufs nicht übergehen können, können Sie seine `background-position` übergehen lassen. Wenn Sie den Farbverlauf also sehr, sehr lang machen (sagen wir 2000 % hoch), fälschen Sie den Farbübergangseffekt, indem Sie stattdessen durch den Farbverlauf scrollen.
Hier ist eine Demo des Effekts: http://codepen.io/keithclark/pen/trFch
Danke, das wird vorerst wohl reichen.
Hallo Chris, einige andere haben es erwähnt, aber meine sofortige Lösung wäre die Verwendung von Pseudoelementen. Da mein Team IE8 unterstützen muss, scheue ich mich sowieso immer vor mehreren Hintergründen (was Fallbacks erfordert). Ich würde einfach ein `img`-Tag in einen Span oder Anker mit Klasse einpacken und den Pseudoklassen-`z-index` festlegen.
Ich habe dieses Konzept zuvor verwendet, um interessante Schatten zu erzeugen: Erstellen Sie ein Pseudoelement mit einem regulären `box-shadow` und wenden Sie eine `transform-rotation` darauf an, setzen Sie das untergeordnete Element (z. B. `![]()
`) auf einen höheren `z-index` und Sie haben einen sich anmutig degradierenden abgewinkelten Schatten. (IE8 wird den Schatten nicht anzeigen)
Hallo Chris,
Wie üblich ein guter Tipp, nur darauf hingewiesen, dass es in Ihrem CSS-Code einen kleinen Fehler bei der Deckkraft gibt
0,45)Sollte `0.45)` sein
Perfekt auf Codepen
Beste Grüße !!!
Danke Cristian! Behoben. Begraben, da nicht mehr relevant.
Ich kann mir vorstellen, dass die Farbverlaufsschicht nützlich für eine Bildergalerie ist, vielleicht entfernt beim Hover, um den Fokus zu zeigen.
Scheint auf Chrome unter iOS nicht zu funktionieren. Habe es aber noch nicht in Safari getestet
Aber es funktioniert nicht… – auf Android
(4.1.1 Chrome 18.0 weder im nativen Browser)
BYO Präfixe.
Ich habe gerade `-prefix-free` aktiviert, vielleicht hilft das der Demo.
Toller Trick. Er vermeidet die vollständige Beeinträchtigung der Stapelreihenfolge und macht, wie Jesse (oben) anmerkt, einen großartigen Filter für etwas wie eine Bilderrastergalerie.
Funktioniert nicht in Webkit (MacOs)
Es funktioniert auch nicht in meinem Zimmer…
(sollten wir zumindest die Webkit-Nummer wissen?)
Schön, Chris! Ich habe vor einiger Zeit etwas Ähnliches gemacht, obwohl mein Ansatz dazu diente, das Hintergrundbild zu „blenden“, anstatt es zu tönen. Theoretisch könnte man einen Filter verwenden, um denselben Effekt zu erzielen.
Es ist auch möglich, eine Variation der Technik zu verwenden, um einen „Siebdruck“-visuellen Effekt auf Bildern zu erzielen.
Danke Chris, ich habe diesen Pseudoelement-Trick bis gestern verwendet… dieser Trick hat mir wirklich geholfen…
Das ist vielleicht eine überladene Frage, nicht ganz passend hier. Weiß jemand, wie man das mit SASS zum Laufen bringt?
Wenn ich die durch Kommas getrennten Attribute in meine Sass-Datei einfüge, frisst sie das auf und gibt es ungültig aus.
Das kommt in meine Sass-Datei
Und das kommt in Chrome heraus. Firefox zeigt es gar nicht an, was ich vermute, weil es ungültig ist und es entfernt.
Ich bin sehr neu in der Verwendung von SASS, also bin ich vielleicht einfach nicht in der Lage, dies zu tun und muss es einfach meiner CSS-Datei hinzufügen. Weiß jemand Rat? Danke.
Außerdem habe ich vergessen zu erwähnen, dass ich **Hammer** zum Kompilieren meines SASS verwende. Ich weiß nicht, ob das einen Unterschied macht.
Keine Sorge, wenn diese Frage zu komplex für die Veröffentlichung hier ist. Ich wollte es einfach trotzdem versuchen.
Sie versuchen nur, einen Farbverlauf kompilieren zu lassen, richtig?
Der CSS-Farbverlaufsgenerator hat eine Option, um zu SCSS auszugeben, wenn das hilft.
Ah, ja, das scheint mein Problem zu lösen. Ich wusste nicht, dass es eine SASS-spezifische Methode für Farbverläufe gibt. Danke.
Verdammt cool.. Das ist einfach unglaublich. Ich werde es in meinen zukünftigen Projekten verwenden. Danke
http://www.thesoftwareguy.in
Ich habe das zufällig vor einiger Zeit in einem Projekt verwendet, falls jemand eine Anwendung davon sehen möchte.
Enthält einen raffinierten Übergang zur Vollfarbe
Der **gleiche Effekt** mit der `box-shadow`-Eigenschaft
Siehe den Stift Beispiel von Maxim Aginsky (@maximaginsky) auf CodePen
Gute Umgehungslösung. Allerdings scheint das in der Demo nicht zu funktionieren. Zumindest nicht bei mir.
Äußerst cool. Danke
Wirklich cool! Nur schade, dass nicht alle Browser harmonisch zusammenarbeiten und dasselbe tun.
Der alternative Weg, um **den Effekt** zu erzielen, ist die Verwendung der `box-shadow`-Eigenschaft
Beispiel auf CodePan
Leider benötigt Safari das Präfix…
Was mich betrifft, ich verwende die Methode mit mehreren Hintergründen und normalerweise nicht RGBA, ich erstelle ein PNG. Seit ich diesen Beitrag gesehen habe, denke ich, dass ich stattdessen diese Methode verwenden werde, da sie viel einfacher ist. Danke!
Ich muss Bilder ohne `alt`-Tags identifizieren, damit meine Redakteure sie finden können. Deshalb habe ich mir diese Technik ausgedacht, die unabhängig vom Bild ist.
if (!$(this).attr('alt') ){$(this).css('opacity','0.4').wrap('<div Style="background:red; width:'+$(this).width()+'px;color:#fff;font-weight:bold ">KEIN ALT-TAG!!</div>');}Ich packe das Bild einfach mit einem Div, passe die Breite an die des Bildes an und füge einen farbigen Hintergrund hinzu und mache das Bild ein wenig transparent.
Das könnte leicht einer Klasse zugewiesen werden.
Danke, gute Arbeit…
Ich versuche, dies für mein Header-Bild zu verwenden, aber aus irgendeinem Grund funktioniert es nicht, wenn ich Bourbon verwende. Sobald ich Bourbon, Neat und Bitters auskommentiere, erscheint das Bild und der Farbverlauf funktioniert.
<
p>Warum? D: D
Ich suche schon seit Stunden danach, es schien so einfach und ich konnte es nicht herausfinden. Vielen Dank!