CSS färgnyckel

Detta kapitel kommer att förklara transparent、currentcolor och inarvera Nyckelordet.

transparent-nyckelord

transparent Nyckelordet används för att göra färgen transparent. Det används ofta för att sätta en transparent bakgrundsfärg för ett element.

Exempel

Här kommer bakgrundsfärgen för <div>-elementet att vara helt transparent, och bakgrundsbilden kommer att visas:

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

Prova själv

Observera:transparent Nyckelordet är lika med rgba(0,0,0,0)RGBA-färgvärden är en utökning av RGB-färgvärden med en alpha-kanal - den specificerar färgens opakhet. Mer information finns i vår CSS RGB Kapitel och CSS färger Kapitel.

currentcolor-nyckelord

currentcolor Nyckelordet liknar en variabel som sparar den aktuella värdet för elementets color-attribut.

Om du vill att en specifik färg ska vara konsekvent i ett element eller på en sida, är denna nyckelord användbar.

Exempel

I detta exempel kommer färgen på ramen för <div>-elementet att vara blå, eftersom textfärgen för <div>-elementet är blå:

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

Prova själv

Exempel

I detta exempel har bakgrundsfärgen för <div>-elementet satts till den aktuella färgvärdet för body-elementet:

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

Prova själv

Exempel

I detta exempel är kantfärgen och skuggfärgen för <div> inställd till body-elementets aktuella färgvärde:

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

Prova själv

inarvera nyckelord

inarvera Nyckelordet specificerar att egenskapen bör arbeta inarverat från föräldrelementets värde.

inarvera Nyckelord kan användas för alla CSS-attribut och kan användas för alla HTML-element.

Exempel

I detta exempel kommer <span>-s kantinställningen att arbeta inarverat från föräldrelementet:

div {
  border: 2px solid red;
}
span {
  border: arbeta inarverat;
}

Prova själv