Quelles sont les méthodes de représentation des couleurs prises en charge par CSS3 ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-03-17 19:01:22

original

3097 Les gens l'ont consulté

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 ;

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

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>

Copier après la connexion

Affichage de la page Web

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