Ein Hintergrund wie dieser mit der gleichen Höhe von rot und gelb.
Verwenden Sie Colorzillas Gradientengenerator , setzen Sie einfach zwei Farben an der gleichen Stelle% und Sie werden eine harte Kante zwischen den beiden Farben bekommen.
%Vor% Colorzillas Gradientengenerator ist ein guter Anfang, aber der Code ist meiner Meinung nach schrecklich.
Sie werden nie leicht sehen, ob die Farben richtig sind, es gibt keine Ausgabe von kurzen Hex-Codes wie #ff0
und - am wichtigsten im Vergleich zu der obigen Antwort - der W3C-Standard hat sich in to <side-or-corner>
.
Wenn Sie also Ihre Frage nach einem flachen Farbverlauf mit gleicher Höhe des roten und gelben Bereichs stellen, ist dies mein bevorzugter Code:
%Vor% Beachten Sie auch, dass Sie in diesem Fall die veraltete Eigenschaft filter
für IEs weglassen können, einfach weil keine Farbstopps enthalten sind.
Wenn Sie die genaue Höhe der Box kennen, können Sie auch mit px
Werten anstelle der %
Werte für die Farbstopps arbeiten.
Aktualisiert 2016-01-16: Weder -o-
vendor-Präfix ist notwendig, noch -ms-
(da IE 10 der erste IE ist, der Gradienten unterstützt und die W3C-Standardsyntax unterstützt) . Siehe Ссылка
Aktualisiert 2016-01-27: Bevorzugen Sie Kleinbuchstaben-Farbwerte für besseres Gippen und geben Sie background-color
und background-image
anstelle von background
. Außerdem wurde to bottom
entfernt, da dies der Standardwert ist.