Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Parole chiave a colori CSS


Questa pagina spiegherà le parole chiave transparent, currentcolor, e inherit.


La parola chiave trasparente

La transparentparola 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 currentcolorparola 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 inheritparola chiave specifica che una proprietà deve ereditare il suo valore dal suo elemento padre.

La inheritparola 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;
}