CSS color keyword

Dette kapitel vil forklare transparent、currentcolor og inherit Nøgleordet.

transparent nøgleord

transparent Nøgleordet bruges til at gøre farver gennemsigtige. Dette bruges normalt til at sætte en gennemsigtig baggrundsfarve på et element.

Eksempel

Her vil baggrundsfarven på <div>-elementet være helt gennemsigtig, og baggrundsbilledet vil blive vist:

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

Prøv det selv

Bemærk:transparent Nøgleordet svarer til rgba(0,0,0,0)RGBA-farveværdier er en udvidelse af RGB-farveværdier, med en alpha-kanal - den specificerer farvens gennemsigtighed. For mere information, se vores CSS RGB Kapitel og CSS color Kapitel.

currentcolor nøgleord

currentcolor Nøgleordet ligner en variabel, der gemmer den nuværende værdi af elementets color-egenskab.

Hvis du ønsker, at en bestemt farve skal være konsistent i et element eller på en side, er denne nøgleord meget nyttig.

Eksempel

I dette eksemplet vil kantfarven på <div>-elementet være blå, fordi tekstmalingen på <div>-elementet er blå:

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

Prøv det selv

Eksempel

I dette eksemplet er baggrundsfarven på <div> indstillet til den nuværende farveværdi af body-elementet:

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

Prøv det selv

Eksempel

I dette eksempel er kantfarven og skyggefarven for <div> indstillet til body-elementets nuværende farveværdi:

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

Prøv det selv

inherit nøgord

inherit Nøgordet specificerer, at egenskaben skal arve værdien fra dens overordnede element.

inherit Nøgord kan bruges til enhver CSS egenskab og kan bruges til ethvert HTML-element.

Eksempel

I dette eksempel vil <span>ens kantlinjeindstilling blive arvet fra overordnede element:

div {
  border: 2px solid rød;
}
span {
  border: arvelig;
}

Prøv det selv