Parola Chiave di Colore CSS

Questo capitolo spiegherà transparent、currentcolor E inherit Parola chiave.

Parola chiave transparent

transparent La parola chiave viene utilizzata per rendere il colore trasparente. Questo viene solitamente utilizzato per impostare un colore di sfondo trasparente per l'elemento.

Esempio

In questo esempio, il colore di sfondo dell'elemento <div> sarà completamente trasparente e l'immagine di sfondo verrà visualizzata:

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

Prova da Solo

Attenzione:transparent La parola chiave è equivalente a rgba(0,0,0,0).I valori di colore RGBA sono un'estensione dei valori di colore RGB, con un canale alpha - che specifica l'opacità del colore. Per ulteriori informazioni, consulta la nostra CSS RGB Capitolo e Colori CSS Capitolo.

Parola chiave currentcolor

currentcolor La parola chiave è simile a una variabile, che memorizza il valore corrente dell'attributo color dell'elemento.

Se desideri che un colore specifico rimanga coerente nell'elemento o nella pagina, questa parola chiave sarà molto utile.

Esempio

In questo esempio, il colore del bordo dell'elemento <div> sarà blu, poiché il colore del testo dell'elemento <div> è blu:

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

Prova da Solo

Esempio

In questo esempio, il colore di sfondo del <div> è impostato sul valore di colore corrente dell'elemento body:

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

Prova da Solo

Esempio

In questo esempio, il colore del bordo e l'ombreggia del colore di <div> sono impostati sul valore di colore corrente dell'elemento body:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Prova da Solo

Parola chiave inherit

inherit La parola chiave specifica che l'attributo dovrebbe ereditare il valore dal suo elemento genitore.

inherit Le parole chiave possono essere utilizzate per qualsiasi attributo CSS e possono essere utilizzate per qualsiasi elemento HTML.

Esempio

In questo esempio, l'impostazione del bordo di <span> viene ereditata dall'elemento genitore:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

Prova da Solo