Ich entwerfe eine Seite mit sowohl einem Hintergrundbild als auch einer Hintergrundfarbe für den Bereich nach dem Ende des (Verlaufs-)Hintergrundbilds.
Etwas wie:
background: url("/images/bg.png") repeat-x scroll center top #666666;
Ich kann die Hintergrundfarbe entweder in Firefox oder Chrome so einstellen, dass sie mit dem Ende des Bildes übereinstimmt, aber nicht in beiden. In einem der beiden ist die von mir eingestellte Farbe immer dunkler als das Ende des Farbverlaufs, sodass eine Trennlinie zwischen den beiden deutlich sichtbar ist.
Ich kann nicht herausfinden, wie ich eine Farbe auswählen kann, die in beiden Browsern funktioniert.
Hier ist ein Beispiel für eine Website, die diese Technik erfolgreich verwendet:
http://www.thermometerapp.com/
In diesem Fall entspricht die Hintergrundfarbe sowohl in FF als auch in Chrome dem Ende des Hintergrundbilds (gegen Ende der Seite endet das bg-Bild und die bg-Farbe füllt den unteren Teil).
Irgendwelche Ideen, wie das funktioniert? Danke.
Bearbeiten: Das erinnert mich an alte Palettenprobleme, aber ich dachte, wir hätten das alles jetzt hinter uns?
Hier ist eine sehr einfache Lösung.
Wenn Sie Ihr Dokument erstellen, lassen Sie Ihren Farbverlauf transparent werden. Das heißt, Sie definieren keine Hintergrundfarbe vor, Sie haben nur den Farbverlauf. Jetzt in Ihrem CSS
background: url("/images/bg.png") repeat-x scroll center top #666666;
Hier #666666definieren Sie, WAS Ihr Farbverlauf überblendet. Auf diese Weise wird es immer konsistent sein. Außerdem bedeutet dies, dass Sie die Farben mit nur einer Codezeile leicht ein wenig ändern können!
Das PNG, das ich verwendet habe
ALTERNATIVE
Oder eine noch fließendere Lösung verwendet ein brandneues CSS! Leider ist es noch nicht "Standard" und es kann eine Weile dauern, bis es so ist, aber unten habe ich aufgelistet, wie man Hintergrundverläufe NUR mit CSS erstellt.
body {
background: -moz-linear-gradient(top, #ff00aa, #123000); //Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#ff00aa), to(#123000)); //Chrome
}
Hier ist ein großartiges Tool, mit dem Sie CSS-Verläufe erstellen können .
Sie könnten ein transparentes PNG verwenden, das von Ihrer Farbe zu transparent übergeht. Diese Lösung hat den Vorteil, dass Sie Ihre Hintergrundfarbe (mit CSS) ändern können, ohne das Verlaufsbild zu ändern.
Keine Antwort, aber Gründe dafür:
Die beste Lösung ist, was Sam vorschlägt ... da Sie sowieso PNGs verwenden, können Sie auch die Transparenzfunktion von ihnen nutzen.
Eine weitere Option ist die Verwendung eines PNG-Komprimierungsprogramms wie OptiPNG List of options . Einer der Gründe, warum diese Farbunterschiede bestehen können, liegt darin, dass einige Designprogramme Gammainformationen in der Datei speichern. Nicht alle Browser verwenden diese Informationen, aber sie liefern Offsets und Farbabweichungen. Diese Option funktioniert am besten, wenn Sie strukturierte Hintergründe haben. Um die Dateigröße gering zu halten, würde ich eine Kombination aus einem PNG-Kompressor und CSS verwenden.
Gif könnte eine Option sein, ergibt aber im Allgemeinen eine größere Dateigröße als ein 8-Bit-PNG
..Wenn Sie Volltonfarbverläufe als Hintergrund verwenden, würde ich die transparente PNG/background-colo0r-Route gehen, wie in DA01 und Sam beschrieben
Wenn es Ihnen nichts ausmacht, CSS-Verläufe zu verwenden, versuchen Sie Folgendes: http://www.colorzilla.com/gradient-editor/
der gradient maker ist sehr intuitiv (genau wie der in adobe photoshop) und generiert den code für alle gazillionen browser.
Es gibt auch einige Presets, die auch sehr gut sind.
Ich würde mich für CSS-Gradienten entscheiden, weil die meisten Browser sie unterstützen und für die Browser, die dies nicht tun (Stichwort unser kleiner Lieblingsteufel - IE), gibt es auch eine Fallback-Option.
Wenn Ihre Grafiken keine Transparenz enthalten, können Sie versuchen, JPG anstelle von PNG zu verwenden.
bgman5
bgman5
Philipp Regan
dkuntz2