Wie verwende ich CSS3-Verläufe für meine background-color
und wende dann eine background-image
an, um eine Art leichte transparente Textur anzuwenden?
css
background-image
gradient
Ronald
quelle
quelle
Antworten:
Mehrere Hintergründe!
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.
Die letzte Zeile legt ein Hintergrundbild und einen Farbverlauf für Browser fest, die damit umgehen können.
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:
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 Sieinitial
:background-position: 50%, initial;
Sie können auch die Hintergrundkürzel verwenden, dies entfernt jedoch die Fallback-Farbe und das Bild.
Gleiches gilt für Hintergrundposition, Hintergrundwiederholung usw.
quelle
background-position
nur das Bild und nicht den Farbverlauf steuern können ?Wenn Sie auch die Hintergrundposition für Ihr Bild festlegen möchten, können Sie Folgendes verwenden:
oder Sie können auch ein WENIGER Mixin (Bootstrap-Stil) erstellen:
quelle
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:
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
quelle
background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
Sie können einfach Folgendes eingeben:
quelle
linear-gradient()
musste vor dem kommenurl()
, und teilweise Transparenz musste für die Verlaufsfarben verwendet werden, mitrgba()
. Bei allem anderen wurde einfach die erste Definition in der Liste verwendet (als wäre die zweite ein Fallback, ähnlich wiefont-family
Deklarationen funktionieren).Ich benutze immer den folgenden Code, damit es funktioniert. Es gibt einige Hinweise:
Diese Technik ist genau die gleiche, da wir mehrere Hintergrundbilder haben, wie hier beschrieben
quelle
meine Lösung:
quelle
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.
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.
quelle
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 ):
quelle
Hier ist ein MIXIN, das ich erstellt habe, um alles zu handhaben, was die Leute gerne benutzen würden:
Dies kann wie folgt verwendet werden:
Hoffe ihr findet das hilfreich.
Dank an @Gidgidonihah für die Suche nach der ersten Lösung.
quelle
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
quelle
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.
quelle
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:
Beachten Sie, dass Sie das
filter
Attribut verwenden und dass zweiprogid:[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.
quelle
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.
quelle
Ich löse das Problem auf diese Weise. Ich definiere Gradient in HTML und Hintergrundbild im Body
quelle
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:
PS Entschuldigung, ich weiß nicht, wie ich mit den Filtern umgehen soll.
quelle
Als sichere Methode können Sie einfach ein Hintergrundbild mit einer Größe von beispielsweise 500 x 5 Pixel erstellen
css
:Wobei
xxxxxx
entspricht der Farbe, die der endgültigen Verlaufsfarbe entspricht.Sie können dies auch am unteren Bildschirmrand korrigieren und an die anfängliche Verlaufsfarbe anpassen.
quelle