Ausführliche Erklärung, wie man den Hintergrundfarbverlauf mit CSS kompatibel macht

In neueren Projekten wurden an vielen Stellen lineare Farbverläufe verwendet, z. B. im Hintergrund der Schaltfläche zum Senden des Formulars, im Titelhintergrund der Datenanzeige usw. Die bisherige Praxis bestand darin, das 1-Pixel-Bild auszuschneiden und dann x zu wiederholen . Im Folgenden werde ich vorstellen, wie man CSS verwendet, um diesen Effekt zu erzielen.

css3: linear-gradient

Zum Beispiel: Schwarzer Farbverlauf zu Weiß, der Code lautet wie folgt:

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

Anleitung: Die spezifische Verwendung von linearem GradientenKlicken Sie hier, um einzugeben.

ie filter: filter

linear-gradient wird unter ie9 nicht unterstützt, daher können wir für ie6 - ie8 filter verwenden, um das Problem zu lösen , der Code lautet wie folgt:

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

Da der Filter eine private Eigenschaft von ie ist, müssen wir den Filtereffekt für ie9 separat verarbeiten. Der Code lautet wie folgt :

:root {filter:none;}

Zusammenfassung:

Zusammenfassend ist die kompatible Schreibmethode mit linearem Farbverlauf wie folgt:

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}:root .gradient{filter:none;}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man den Hintergrundfarbverlauf mit CSS kompatibel macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!