Klíčová slova barev CSS

Obsah

Tato stránka vysvětlí klíčová slova:

transparent
currentcolor
inherit

Průhledné klíčové slovo

Klíčové slovo transparentní se používá k vytvoření a barva transparentní. To se často používá k vytvoření průhledné barvy pozadí prvek.

Příklad

Zde bude barva pozadí prvku <div> plná průhledný a obrázek na pozadí bude prosvítat:

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

Zkuste to sami →

<!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>

Poznámka: transparentní klíčové slovo je ekvivalentní rgba(0,0,0,0). Barevné hodnoty RGBA jsou rozšířením Hodnoty barev RGB s alfa kanálem - který určuje krytí pro a barva. Přečtěte si více v naší kapitole CSS RGB a v naše kapitola Barvy CSS.

Klíčové slovo aktuální barva

Klíčové slovo currentcolor je jako proměnná který obsahuje aktuální hodnotu vlastnosti color prvku.

Toto klíčové slovo může být užitečné, pokud chcete, aby byla konkrétní barva konzistentní v prvek nebo stránku.

Příklad

V tomto příkladu bude barva ohraničení prvku <div> modrá, protože barva textu prvku <div> je modrá:

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

Zkuste to sami →

<!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>

Příklad

V tomto příkladu je barva pozadí <div> nastavena na aktuální barvu hodnota prvku těla:

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

Zkuste to sami →

<!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>

Příklad

V tomto příkladu je barva ohraničení a barva stínu <div> nastavena na aktuální hodnota barvy prvku těla:

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

Zkuste to sami →

<!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>

Klíčové slovo zdědit

Klíčové slovo herit určuje, že a vlastnost by měla zdědit svou hodnotu od svého nadřazeného prvku.

Klíčové slovo herit lze použít pro jakýkoli styl CSS vlastnost a na jakýkoli prvek HTML.

Příklad

V tomto příkladu bude nastavení ohraničení <span> zděděno z nadřazený prvek:

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

Zkuste to sami →

<!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>