CSS farve søgeord

Indholdsfortegnelse

Denne side vil forklare nøgleordene:

transparent
currentcolor
inherit

Det gennemsigtige søgeord

gennemsigtige søgeordet bruges til at lave en farve gennemsigtig. Dette bruges ofte til at lave en gennemsigtig baggrundsfarve til et element.

Eksempel

Her vil baggrundsfarven for <div>-elementet være fuldt ud gennemsigtig, og baggrundsbilledet vises gennem:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}

div.ex1 { 
  background-color: lightgreen;
  border: 2px solid black;
  padding: 15px;
}

div.ex2 { 
  background-color: transparent;
  border: 2px solid black;
  padding: 15px;
} 
</style>
</head>
<body>

<h2>The transparent Keyword</h2>

<div class="ex1">This div has a light green background.</div>
<br>
<div class="ex2">This div has a transparent background.</div>

</body>
</html>

Bemærk: Den gennemsigtige søgeord svarer til rgba(0,0,0,0). RGBA-farveværdier er en forlængelse af RGB-farveværdier med en alfakanal - som angiver opaciteten for en farve. Læs mere i vores CSS RGB-kapitel og i vores CSS-farver kapitel.

Det aktuelle farvenøgleord

Søgeordet currentcolor er som en variabel der holder den aktuelle værdi af farveegenskaben for et element.

Dette søgeord kan være nyttigt, hvis du ønsker, at en bestemt farve skal være konsistent i en element eller en side.

Eksempel

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

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  color: blue;
  border: 10px solid currentcolor;
  padding: 15px;  
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>The currentcolor keyword refers to the current value of the color property of an element.</p>

<div>
This div element has a blue text color and a blue border.
</div>

</body>
</html>

Eksempel

I dette eksempel er <div>'s baggrundsfarve indstillet til den aktuelle farve værdien af kropselementet:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: purple;
}

div {
  background-color: currentcolor;
  padding: 15px;
}

div p {
  color: white;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's background color is set to the current color value of the body element.</p>
</div>

</body>
</html>

Eksempel

I dette eksempel er <div>'s kantfarve og skyggefarve indstillet til den aktuelle farveværdi for kropselementet:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: green;
}

div { 
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
  padding: 15px;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's border color and shadow color is set to the current color value of the body element.</p>
</div>

</body>
</html>

Det arvelige søgeord

Søgeordet inherit angiver, at en ejendom skal arve sin værdi fra dets overordnede element.

Søgeordet inherit kan bruges til enhver CSS egenskab og på ethvert HTML-element.

Eksempel

I dette eksempel vil <span>'s kantindstillinger blive arvet fra det overordnede element:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
}

span {
  border: inherit;
}
</style>
</head>
<body>

<h2>The inherit Keyword</h2>

<div>Here, the <span>span element's</span> border settings will be inherited from the parent element.</div>
<br>

<div style="border:2px dotted blue;">Here, the <span>span element's</span> border settings will also be inherited from the parent element.</div>

</body>
</html>