Heim > Artikel > Web-Frontend > Welche Farbdarstellungsmethoden werden von CSS3 unterstützt?

Welche Farbdarstellungsmethoden werden von CSS3 unterstützt?

青灯夜游Original: 2022-03-17 19:01:223075Durchsuche

CSS3-Farbdarstellungsmethoden umfassen: 1. Verwenden Sie den englischen Namen der Farbe, um sie darzustellen, z. B. „rot“ bedeutet Rot. 2. Verwenden Sie die hexadezimale Schreibweise, z. B. „#ffff00“. 3. Verwenden Sie die Funktion rgb() um es darzustellen; 4. Verwenden Sie die Funktion hsl(), um es darzustellen. 5. Verwenden Sie die Funktion hsla(), um es darzustellen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Prinzip der drei Grundfarben von Farbe und Licht

Die drei Grundfarben von Farbe und Licht sind Rot (Rot), Grün (Grün), Blau (Blau), die sich bilden können eine Vielzahl brillanter Farben.

Wenn Sie sich wirklich nicht erinnern, gehen Sie hier links zur Baidu-Enzyklopädie

Die von CSS3 unterstützte Farbdarstellungsmethode

wird durch den englischen Namen der Farbe dargestellt. Der englische Name stellt eine Farbe dar, die Darstellung ist jedoch sehr begrenzt und schwer zu merken und abzufragen.
wird durch die Farbe von hex dargestellt. Das Prinzip der drei Grundfarben Farbe und Licht kann der Tabelle entnommen werden.
wird dargestellt durch rgb (r, g, b). Das Prinzip der drei Grundfarben des Lichts, Rot + Grün + Blau.
wird dargestellt durch hsl (Farbton, Sättigung, Helligkeit). Farbton + Sättigung + Helligkeit.
wird dargestellt durch rgba (r, g, b, a). Das Prinzip der drei Grundfarben Licht, Rot, Grün, Blau + Transparenz. a ∈ [0, 1], 0 steht für vollständige Transparenz.
wird dargestellt durch hsla (Farbton, Sättigung, Helligkeit, Alpha). Farbton, Sättigung, Helligkeit + Transparenz. Alpha ∈ [0, 1], 0 steht für vollständige Transparenz.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8">
    <title>CSS颜色表示</title>
    <style type="text/css">
      div>div{
        width: 400px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 300; i++) {
        document.write("CSS颜色表示");
      }
    </script>
    <div style="position:absolute;top:0px">
      <div style="background-color:gray;">
        background-color:gray
      </div>
      <div style="background-color:#ff4314;">
        background-color:#888
      </div>
      <div style="background-color:#ffff00;">
        background-color:#ffff00
      </div>
      <div style="background-color:rgb(0, 255, 255);">
        background-color:rgb(0, 255, 255)
      </div>
      <div style="background-color:hsl(120, 100%, 50%);">
        background-color:hsl(120, 100%, 50%)
      </div>
      <div style="background-color:rgba(0, 255, 255, 0.5);">
        background-color:rgba(0, 255, 255, 0.5)
      </div>
      <div style="background-color:hsla(120, 100%, 50%, 0.5);">
        background-color:hsla(120, 100%, 50%, 0.5)
      </div>
    </div>
  </body>
</html>

Webseitenanzeige

Welche Farbdarstellungsmethoden werden von CSS3 unterstützt?

Erklärung

Der Grund, warum Text am Ende hinzugefügt wird, besteht darin, die Transparenz zu überprüfen.

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Farbdarstellungsmethoden werden von CSS3 unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche neuen Selektoren werden zu CSS3 hinzugefügt?Nächster Artikel：Welche neuen Selektoren werden zu CSS3 hinzugefügt?

In Verbindung stehende Artikel

Mehr sehen