Beheben Sie den Farbunterschied zwischen Browsern im Hintergrundgradienten -Farbfarb

Cross-Browser-Hintergrund-Gradienten-Farbreparaturhandbuch

Während der Entwicklung bemerkte ich einen spürbaren Farbunterschied zwischen Firefox 12 und Chrom Canary 21. Dies hat offensichtlich mit der Art und Weise zu tun, wie verschiedene Browser CSS3 rendern.

Vorheriger CSS -Code

<code class="language-css">background-image: -moz-linear-gradient(top, #5CB6F2, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0ae), to(#fff));
background-image: -webkit-linear-gradient(top, #0ea, white);</code>

CSS -Code

behoben

<code class="language-css">background: #FFFFFF; /* 用于不支持CSS3的浏览器 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CB6F2', endColorstr='#FFFFFF'); /* 用于IE浏览器 */
background: -webkit-gradient(linear, left top, left bottom, from(#5CB6F2), to(#FFF)); /* 用于webkit浏览器 */
background: -moz-linear-gradient(top,  #5CB6F2,  #FFF); /* 用于Firefox 3.6+ */</code>

getan! :)

Aus Neugier wird hier im Internet Explorer 9:

angezeigt.

häufig gestellte Fragen zu häufig gestellten Fragen zum Cross-Browser-Hintergrundgradienten Farbunterschied Reparatur

Warum zeigen verschiedene Browser unterschiedlich Gradientenfarben?

Der Hauptgrund, warum verschiedene Browser Gradientenfarben anzeigen, ist, dass diese Browser CSS auf unterschiedliche Weise interpretieren und rendern. Jeder Browser verfügt über eine eigene Rendering -Engine, die für die Anzeige von Webseiteninhalten verantwortlich ist. Diese Motoren interpretieren den CSS -Code auf unterschiedliche Weise, was zu leicht unterschiedlichen Anzeigen von Gradientenfarben führt. Zum Beispiel können Webkit -Browser wie Safari und Chrome etwas unterschiedliche Farben als Gecko -Browser wie Firefox machen.

Wie kann ich in allen Browsern eine konsistente Anzeige von Gradientenfarben sicherstellen?

Um die konsistente Anzeige von Gradientenfarben in allen Browsern sicherzustellen, können Sie das Anbieter -Präfix verwenden. Dies sind eindeutige Codes, die für jeden Browser spezifisch sind. Beispielsweise verwenden Sie für Firefox -moz-linear-gradient, für Chrome und Safari werden Sie -webkit-linear-gradient und für die Opera -o-linear-gradient verwenden. Durch Angeben dieser Präfixe in CSS können Sie sicherstellen, dass jeder Browser den Gradienten wie erwartet interpretieren kann.

Was ist das Anbieter -Präfix in CSS?

Das Präfix des Anbieters ist eine Möglichkeit für Browser, zu implementieren und zu experimentieren, bevor neue CSS -Funktionen Standard werden. Sie sind spezifisch für jeden Browser, sodass Entwickler bestimmte Browser mit unterschiedlichen Stilen oder Funktionen ansprechen können. Beispielsweise wird -webkit- für Chrom und Safari verwendet, -moz- wird für Firefox verwendet, -ms- wird für Internet Explorer verwendet, -o- wird für die Oper verwendet.

Wie kann man CSS -linearer Gradienten verwenden?

Die linearen

CSS -Gradienten können verwendet werden, um glatte Übergänge zwischen zwei oder mehr festgelegten Farben zu erzeugen. Um einen linearen Gradienten zu erstellen, können Sie die Funktion linear-gradient() verwenden. In dieser Funktion können Sie die Richtung des Gradienten und der zu verwendenden Farbe angeben. Zum Beispiel erstellt background: linear-gradient(to right, red, orange); einen Gradienten von links nach rechts von rot nach orange.

Warum funktioniert mein CSS -Gradient nicht im Internet Explorer?

Internet Explorer unterstützt keine Standard -CSS -Gradientensyntax. Stattdessen wird das Attribut filter zum Erstellen von Gradienten verwendet. Um beispielsweise einen Gradienten von Weiß bis Schwarz zu erstellen, können Sie filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); verwenden. Dies wird jedoch nicht empfohlen, da es sich nicht um Standard -CSS handelt und möglicherweise nicht in allen Versionen des IE funktioniert.

Wie erstellt man einen radialen Gradienten in CSS?

Um einen radialen Gradienten in CSS zu erstellen, können Sie die Funktion radial-gradient() verwenden. In dieser Funktion können Sie die Form und Größe des Gradienten sowie die zu verwendende Farbe angeben. Zum Beispiel erzeugt background: radial-gradient(circle, red, yellow, green); einen kreisförmigen Gradienten von rot nach gelb bis grün.

Kann ich Transparenz im CSS -Gradienten verwenden?

Ja, Sie können Transparenz in CSS -Gradienten verwenden. Dazu können Sie die Funktion rgba() verwenden, um die Farbe anzugeben. Zum Beispiel erstellt background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,255,0,0.5)); einen Gradienten von durchscheinend rot bis durchscheinend grün.

Wie erstellt man einen diagonalen Gradienten in CSS?

Um einen diagonalen Gradienten in CSS zu erstellen, können Sie eine Richtung in der Funktion linear-gradient() angeben. Zum Beispiel erzeugt background: linear-gradient(to bottom right, red, blue); einen Verlauf von rot bis blau diagonal von der oberen linken Ecke bis zur unteren rechten Ecke.

Kann ich mehrere Gradienten in einem Element verwenden?

Ja, Sie können mehrere Gradienten in einem Element verwenden. Dazu müssen Sie nur jeden Gradienten mit einem Komma trennen. Zum Beispiel erzeugt background: linear-gradient(red, blue), linear-gradient(yellow, green); zwei Gradienten, eine von rot nach blau und eine von gelb bis grün.

Wie erstelle ich wiederholende Gradienten in CSS?

Um einen sich wiederholenden Gradienten in CSS zu erstellen, können Sie die Funktionen repeating-linear-gradient() oder repeating-radial-gradient() verwenden. Diese Funktionen funktionieren genauso wie ihre nicht wiederholten entsprechenden Funktionen, wiederholen jedoch den angegebenen Gradienten. Zum Beispiel erstellt background: repeating-linear-gradient(red, yellow 10%, green 20%); einen Gradienten von rot bis gelb bis grün und dann wiederholt.

Das obige ist der detaillierte Inhalt vonBeheben Sie den Farbunterschied zwischen Browsern im Hintergrundgradienten -Farbfarb. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!