Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen

CSS3-Hintergrundbild bezogen

Kompatibilität: IE9+

Hintergrund-Clip Hintergrundbild Zeichenbereich

Hintergrundclip: Rahmenbox; Inhaltsbereich

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p3.jpg) Mitte;
        Polsterung: 50px;
        Rand: 50px durchgehend transparent;
        Hintergrundclip: Inhaltsbox;
        /*Hintergrundclip:Polsterbox;*/
        /*Hintergrundclip:Rahmenbox;*/
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Hintergrundclip: Polsterbox; Polsterbereich

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p3.jpg) Mitte;
        Polsterung: 50px;
        Rand: 50px durchgehend transparent;
        Hintergrundclip: Polsterbox;
        /*Hintergrundclip:Rahmenbox;*/
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Hintergrundclip: Rahmenbox; Randbereich

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p3.jpg) 50px 50px keine Wiederholung;
        Polsterung: 50px;
        Rand: 50px durchgehend transparent;
        Hintergrundherkunft: Rahmenbox;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Hintergrundherkunft: Inhaltsbox | Polsterbox | Rahmenbox; Startposition des Hintergrundbildes

Das Hintergrundbild ist horizontal und vertikal 50 Pixel nach unten von der Rahmenbox versetzt.

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p3.jpg) 50px 50px keine Wiederholung;
        Polsterung: 50px;
        Rand: 50px durchgehend transparent;
        Hintergrundherkunft: Polsterbox;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Das Hintergrundbild ist horizontal und vertikal 50 Pixel nach unten von der Padding-Box versetzt.

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p3.jpg) 50px 50px keine Wiederholung;
        Polsterung: 50px;
        Rand: 50px durchgehend transparent;
        Hintergrundherkunft: Inhaltsbox;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Das Hintergrundbild ist horizontal und vertikal 50 Pixel nach unten von der Inhaltsbox versetzt

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p2.jpg) 50px 50px keine Wiederholung;
        Hintergrundgröße: 100 %;/*Die Breite beträgt 100 % der Containerbreite und die Höhe ist proportional zum Bild*/
        Hintergrundgröße: 100 % 100 %;/*Die Breite beträgt 100 % der Containerbreite und die Höhe beträgt 100 % der Containerhöhe*/
        Hintergrundgröße: Abdeckung;
        Hintergrundgröße: enthalten;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Hintergrundgröße: Wenn Sie einen numerischen Wert oder einen Prozentsatz eingeben und nur einen Wert eingeben, wird der andere Wert standardmäßig automatisch

Deckel füllt den Behälter mit proportionaler Skalierung

enthalten Skalen proportional, bis eine Seite den Rand des Behälters berührt

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund:URL(Quelle/p2.jpg) 50px 50px keine Wiederholung;
        Hintergrundgröße: 100 %;/*Die Breite beträgt 100 % der Containerbreite und die Höhe ist proportional zum Bild*/
        Hintergrundgröße: 100 % 100 %;/*Die Breite beträgt 100 % der Containerbreite und die Höhe beträgt 100 % der Containerhöhe*/
        Hintergrundgröße: Abdeckung;
        Hintergrundgröße: enthalten;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Mehrere Hintergrundbilder

background-image:url(),url();

Das vorherige Bild überdeckt das nächste Bild.

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrundbild: URL (Quelle/shuiyin.png), URL (Quelle/cat.jpg);

    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Stellen Sie die Farbe auf transparent ein: transparent

CSS3-Farbverlauf

Kompatibilität: IE10

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund: -webkit-linear-gradient(pink, orange, #abcdef);/*Die Standardeinstellung ist vertikal*/
        Hintergrund: -moz-linear-gradient(pink, orange, #abcdef);/*Die Standardeinstellung ist vertikal*/
        Hintergrund: -o-linear-gradient(pink, orange, #abcdef);/*Der Standardwert ist vertikal*/
        Hintergrund: linearer Farbverlauf (pink, orange, #abcdef);/*Der Standardwert ist vertikal*/

        Hintergrund: -webkit-linear-gradient(links, rosa, orange, #abcdef);/*von links nach rechts*/
        Hintergrund: -moz-linear-gradient (rechts, rosa, orange, #abcdef);
        Hintergrund: -o-linear-gradient (rechts, rosa, orange, #abcdef);
        Hintergrund: linearer Farbverlauf (nach rechts, rosa, orange, #abcdef);

        Hintergrund: -webkit-linear-gradient(links oben, rosa, orange, #abcdef);/*von oben links nach unten rechts*/
        Hintergrund: -moz-linear-gradient (rechts unten, rosa, orange, #abcdef);
        Hintergrund: -o-linear-gradient (rechts unten, rosa, orange, #abcdef);
        Hintergrund: linearer Farbverlauf (nach rechts unten, rosa, orange, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Der Winkel des normalen linearen Gradienten

Winkel des linearen Gradienten unter dem WebKit-Kernel

Lösung: Bei kompatiblen Browsern werden die Präfixe der Reihe nach geschrieben, wobei die ohne Präfixe in der Regel ans Ende gestellt werden.

Farben können bestimmte Positionen zugewiesen werden

Wenn die erste Farbe nicht angegeben ist, liegt sie standardmäßig bei 0 %; die letzte Farbe liegt standardmäßig bei 100 %

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund: -webkit-linear-gradient(45 Grad, rosa, orange, #abcdef);/*Spezifische Winkeldarstellung*/
        Hintergrund: -moz-linear-gradient (45 Grad, rosa, orange, #abcdef);
        Hintergrund: -o-linear-gradient(45 Grad, rosa, orange, #abcdef);
        Hintergrund: linearer Farbverlauf (45 Grad, rosa, orange, #abcdef);

        Hintergrund: -webkit-linear-gradient (90 Grad, Orange, Pink 30 %, Lila 70 %, #abcdef);
        Hintergrund: -moz-linear-gradient (90 Grad, Orange, Pink 30 %, Lila 70 %, #abcdef);
        Hintergrund: -o-linear-gradient(90 Grad, Orange, Pink 30 %, Lila 70 %, #abcdef);
        Hintergrund: linearer Farbverlauf (90 Grad, Orange, Pink 30 %, Lila 70 %, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

rgba() kann einen Farbverlauf mit transparenter Farbe festlegen

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund: -webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*Spezifische Winkeldarstellung*/
        Hintergrund: -moz-linear-gradient(90 Grad, rgba(255,0,0,0), rgba(255,0,0,1));
        Hintergrund: -o-linear-gradient(90 Grad, rgba(255,0,0,0), rgba(255,0,0,1));
        Hintergrund: linearer Farbverlauf (90 Grad, RGBA (255,0,0,0), RGBA (255,0,0,1));

    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Wiederholender Farbverlauf

sich wiederholender linearer Farbverlauf

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 500px;
        Höhe: 500px;
        Hintergrund: -WebKit-Wiederholungs-linearer-Gradient (90 Grad, RGBA (255,0,0,0), RGBA (255,0,0,1) 20 %);
        Hintergrund: -moz-repeating-linear-gradient(90 Grad, rgba(255,0,0,0), rgba(255,0,0,1) 20 %);
        Hintergrund: -o-repeating-linear-gradient(90 Grad, rgba(255,0,0,0), rgba(255,0,0,1) 20 %);
        Hintergrund: sich wiederholender linearer Farbverlauf (90 Grad, RGBA (255,0,0,0), RGBA (255,0,0,1) 20 %);

    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

radialer Farbverlauf

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 400px;
        Höhe: 200px;
        Randradius: 50 %;
        Hintergrund: -webkit-radial-gradient(pink, #abcdef);
        Hintergrund: -moz-radial-gradient(pink, #abcdef);
        Hintergrund: -o-radial-gradient(pink, #abcdef);
        Hintergrund: radialer Farbverlauf (pink, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Behalten Sie den kreisförmigen Farbverlauf bei

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 400px;
        Höhe: 200px;
        Randradius: 50 %;
        Hintergrund: -webkit-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis, rosa, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Größe nächste Seite nächste Ecke entfernte Seite entfernte Ecke

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 200px;
        Höhe: 100px;
        Randradius: 50 %;
        Rand unten: 50px;
        Zeilenhöhe: 100px;
        Textausrichtung: zentriert;
/* Hintergrund: -webkit-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis, rosa, #abcdef);*/
    }
    div:n-tes-Kind(1){
        Hintergrund: -webkit-radial-gradient (Kreis auf der nächsten Seite, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis auf der nächsten Seite, rosa, #abcdef);
        Hintergrund: -o-radial-gradient (Kreis auf der nächsten Seite, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis auf der nächstgelegenen Seite, rosa, #abcdef);
    }
    div:n-tes-Kind(2){
        Hintergrund: -webkit-radial-gradient (Kreis mit der nächsten Ecke, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis mit der nächsten Ecke, rosa, #abcdef);
        Hintergrund: -o-radial-gradient (Kreis mit der nächsten Ecke, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis mit der nächsten Ecke, rosa, #abcdef);
    }
    div:n-tes-Kind(3){
        Hintergrund: -webkit-radial-gradient (Kreis am äußersten Rand, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis am äußersten Rand, rosa, #abcdef);
        Hintergrund: -o-radial-gradient (Kreis am äußersten Rand, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis am äußersten Rand, rosa, #abcdef);
    }
    div:n-tes-Kind(4){
        Hintergrund: -webkit-radial-gradient (Kreis am äußersten Ende, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis am äußersten Ende, rosa, #abcdef);
        Hintergrund: -o-radial-gradient (Kreis am äußersten Ende, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis in der äußersten Ecke, rosa, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div>nächste Seite</div>
    <div>nächste Ecke</div>
    <div>entfernteste Seite</div>
    <div>entfernteste-Ecke</div>
</body>
</html>

Legen Sie die mittlere Position des Farbverlaufs fest

10 % der Breite horizontal und 20 % der Höhe vertikal

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 200px;
        Höhe: 100px;
        Rand unten: 50px;
        Zeilenhöhe: 100px;
        Textausrichtung: zentriert;
/* Hintergrund: -webkit-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient (Kreis, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(Kreis, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (Kreis, rosa, #abcdef);*/
    }
    div:n-tes-Kind(1){
        Hintergrund: -webkit-radial-gradient (10 % 20 %, Kreis auf der nächstgelegenen Seite, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient(10 % 20 %, Kreis auf der nächstgelegenen Seite, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(10 % 20 %, Kreis auf der nächstgelegenen Seite, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (10 % 20 %, Kreis auf der nächstgelegenen Seite, rosa, #abcdef);
    }
    div:n-tes-Kind(2){
        Hintergrund: -webkit-radial-gradient(10 % 20 %, Kreis in der nächsten Ecke, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient(10 % 20 %, Kreis in der nächsten Ecke, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(10 % 20 %, Kreis in der nächsten Ecke, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (10 % 20 %, Kreis in der nächsten Ecke, rosa, #abcdef);
    }
    div:n-tes-Kind(3){
        Hintergrund: -webkit-radial-gradient (10 % 20 %, äußerster Kreis, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient(10 % 20 %, äußerster Kreis, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(10 % 20 %, äußerster Kreis, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (10 % 20 %, äußerster Kreis, rosa, #abcdef);
    }
    div:n-tes-Kind(4){
        Hintergrund: -webkit-radial-gradient (10 % 20 %, Kreis in der äußersten Ecke, rosa, #abcdef);
        Hintergrund: -moz-radial-gradient(10 % 20 %, äußerster Kreis, rosa, #abcdef);
        Hintergrund: -o-radial-gradient(10 % 20 %, äußerster Kreis, rosa, #abcdef);
        Hintergrund: radialer Farbverlauf (10 % 20 %, äußerster Kreis, rosa, #abcdef);
    }
</Stil>
</Kopf>
<Text>
    <div>nächste Seite</div>
    <div>nächste Ecke</div>
    <div>entfernteste Seite</div>
    <div>entfernteste-Ecke</div>
</body>
</html>

repeating-radial-gradient Wiederholender radialer Farbverlauf

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 200px;
        Höhe: 100px;
        Rand unten: 50px;
        Zeilenhöhe: 100px;
        Textausrichtung: zentriert;
        Hintergrund: -webkit-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: -moz-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: -o-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: sich wiederholender radialer Farbverlauf (Kreis, rosa, #abcdef 20 %);
    }

</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Farbverlauf im IE-Browser

IE10+ unterstützt Farbverlauf

IE6-8 Filter verwenden

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 200px;
        Höhe: 100px;
        Rand unten: 50px;
        Zeilenhöhe: 100px;
        Textausrichtung: zentriert;
        Hintergrund: -webkit-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: -moz-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: -o-repeating-radial-gradient (Kreis, rosa, #abcdef 20 %);
        Hintergrund: sich wiederholender radialer Farbverlauf (Kreis, rosa, #abcdef 20 %);
        Filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Verwenden Sie die IE-Konsole, um die IE-Browserversion zu wechseln

IE-Filter

0 Linearer Farbverlauf von links nach rechts

1 Linearer Farbverlauf von oben nach unten

Tatsächlicher Fall:

<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
    div{
        Breite: 600px;
        Höhe: 300px;
        Hintergrundfarbe: #abcdef;
        Hintergrundgröße: 100px 100px;
        Hintergrundbild: -webkit-linear-gradient(45 Grad, rosa 25 %, transparent 25 %),
                         -webkit-linear-gradient(-45 Grad, rosa 25 %, transparent 25 %),
                         -webkit-linear-gradient(45 Grad, transparent 75 %, rosa 75 %),
                         -webkit-linear-gradient(-45 Grad, transparent 75 %, rosa 75 %);
        Hintergrundbild: -moz-linear-gradient(45 Grad, rosa 25 %, transparent 25 %),
                         -moz-linear-gradient(-45 Grad, rosa 25 %, transparent 25 %),
                         -moz-linear-gradient(45 Grad, transparent 75 %, rosa 75 %),
                         -moz-linear-gradient(-45 Grad, transparent 75 %, rosa 75 %);
        Hintergrundbild: -o-linear-gradient(45 Grad, rosa 25 %, transparent 25 %),
                         -o-linear-gradient(-45 Grad, rosa 25 %, transparent 25 %),
                         -o-linear-gradient(45 Grad, transparent 75 %, rosa 75 %),
                         -o-linear-gradient(-45 Grad, transparent 75 %, rosa 75 %);
        Hintergrundbild: linearer Farbverlauf (45 Grad, rosa 25 %, transparent 25 %),
                         linearer Farbverlauf (-45 Grad, rosa 25 %, transparent 25 %),
                         linearer Farbverlauf (45 Grad, transparent 75 %, rosa 75 %),
                         linearer Farbverlauf (-45 Grad, transparent 75 %, rosa 75 %);
    }

</Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>