Parole chiave a colori CSS
Questa pagina spiegherà le parole chiave transparent
, currentcolor
, e
inherit
.
La parola chiave trasparente
La transparent
parola chiave viene utilizzata per rendere trasparente un colore. Questo è spesso usato per creare un colore di sfondo trasparente per un elemento.
Esempio
Qui, il colore di sfondo dell'elemento <div> sarà completamente trasparente e l'immagine di sfondo verrà mostrata attraverso:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Nota: la transparent
parola chiave equivale a rgba(0,0,0,0). I valori di colore RGBA sono un'estensione dei valori di colore RGB con un canale alfa, che specifica l'opacità di un colore. Maggiori informazioni nel nostro capitolo CSS RGB e nel nostro capitolo Colori CSS .
La parola chiave color corrente
La currentcolor
parola chiave è come una variabile che contiene il valore corrente della proprietà color di un elemento.
Questa parola chiave può essere utile se vuoi che un colore specifico sia coerente in un elemento o in una pagina.
Esempio
In questo esempio il colore del bordo dell'elemento <div> sarà blu, perché il colore del testo dell'elemento <div> è blu:
div {
color: blue;
border: 10px solid currentcolor;
}
Esempio
In questo esempio il colore di sfondo di <div> è impostato sul valore di colore corrente dell'elemento body:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Esempio
In questo esempio il colore del bordo e dell'ombra di <div> è impostato sul valore del colore corrente dell'elemento body:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
La parola chiave ereditaria
La inherit
parola chiave specifica che una proprietà deve ereditare il suo valore dal suo elemento padre.
La inherit
parola chiave può essere utilizzata per qualsiasi proprietà CSS e su qualsiasi elemento HTML.
Esempio
In questo esempio le impostazioni del bordo di <span> verranno ereditate dall'elemento padre:
div {
border: 2px solid red;
}
span {
border:
inherit;
}