Maison > Article > interface Web > Quelles sont les méthodes de représentation des couleurs prises en charge par CSS3 ?

Quelles sont les méthodes de représentation des couleurs prises en charge par CSS3 ?

青灯夜游original: 2022-03-17 19:01:223011parcourir

Les méthodes de représentation des couleurs CSS3 incluent : 1. Utilisez le nom anglais de la couleur pour la représenter, par exemple "red" signifie rouge ; 2. Utilisez la notation hexadécimale, par exemple "#ffff00" 3. Utilisez la fonction rgb() ; pour le représenter ; 4. Utilisez la fonction hsl() pour le représenter ; 5. Utilisez la fonction rgba() pour le représenter ; 6. Utilisez la fonction hsla() pour le représenter ;

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Principe des trois couleurs primaires de couleur et de lumière

Les trois couleurs primaires de couleur et de lumière sont rouge (Rouge), vert (Vert), bleu (Bleu), qui peuvent former une variété de couleurs brillantes.

Si vous ne vous en souvenez vraiment pas, tournez à gauche ici vers l'Encyclopédie Baidu

La méthode de représentation des couleurs prise en charge par CSS3

est représentée par le nom anglais de la couleur. Le nom anglais représente une couleur, mais la représentation est très limitée et difficile à retenir et à interroger.
est représenté par la couleur de hex . Le principe des trois couleurs primaires de couleur et de lumière peut être consulté dans le tableau.
est représenté par rgb (r, g, b). Le principe des trois couleurs primaires de lumière, rouge + vert + bleu.
est représenté par hsl (Teinte, Saturation, Légèreté). Teinte + Saturation + Luminosité.
est représenté par rgba (r, g, b, a). Le principe des trois couleurs primaires lumière, rouge, vert, bleu + transparence. a ∈ [0, 1], 0 représente une transparence totale.
est représenté par hsla (Teinte, Saturation, Luminosité, alpha). Teinte, saturation, luminosité + transparence. alpha ∈ [0, 1], 0 représente une transparence totale.

Exemple :

<!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>

Affichage de la page Web

Quelles sont les méthodes de représentation des couleurs prises en charge par CSS3 ?

Explication

La raison pour laquelle du texte est ajouté à la fin est pour vérifier la transparence.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels nouveaux sélecteurs sont ajoutés à CSS3 ?Article suivant：Quels nouveaux sélecteurs sont ajoutés à CSS3 ?

Articles Liés

Voir plus