Mots-clés de couleur CSS

Ce chapitre expliquera transparent、currentcolor et hérité mot-clé.

mot-clé transparent

transparent Le mot-clé est utilisé pour rendre la couleur transparente. Il est généralement utilisé pour définir une couleur de fond transparente pour un élément.

Exemple

Dans ce cas, la couleur de fond de l'élément <div> sera complètement transparente et l'image de fond s'affichera :

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

Essayer par vous-même

Remarque :transparent Le mot-clé équivaut à rgba(0,0,0,0).La valeur de couleur RGBA est une extension de la valeur de couleur RGB, avec un canal alpha - il spécifie l'opacité de la couleur. Pour plus d'informations, veuillez consulter notre CSS RGB Chapitre et Couleurs CSS Chapitre.

mot-clé currentcolor

currentcolor Le mot-clé est similaire à une variable, il sauvegarde la valeur actuelle de l'attribut color de l'élément.

Si vous souhaitez que une couleur spécifique reste cohérente dans un élément ou une page, ce mot-clé sera très utile.

Exemple

Dans cet exemple, la couleur de bord de l'élément <div> sera bleue, car la couleur de texte de l'élément <div> est bleue :

div {
  color: blue;
  border: 10px solid currentcolor;
}

Essayer par vous-même

Exemple

Dans cet exemple, la couleur de fond de l'élément <div> est définie sur la valeur de couleur actuelle de l'élément body :

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Essayer par vous-même

Exemple

Dans cet exemple, la couleur de bord et la couleur d'ombre du <div> sont définies pour être la valeur de couleur actuelle de l'élément body :

body {
 couleur: vert;
}
div {
  ombre: 0px 0px 15px currentcolor;
  border: 5px solide currentcolor;
}

Essayer par vous-même

Mot-clé hérité

hérité Le mot-clé spécifie que l'attribut doit hériter de sa valeur de l'élément parent.

hérité Les mots-clés peuvent être utilisés pour n'importe quel attribut CSS et peuvent être utilisés pour n'importe quel élément HTML.

Exemple

Dans cet exemple, la couleur de bord du <span> est définie pour hériter de la couleur de bord de l'élément parent :

div {
  border: 2px solide rouge;
}
span {
  border: hérité;
}

Essayer par vous-même