CSS-Farbschlüsselwörter

Inhaltsverzeichnis

Auf dieser Seite werden die Schlüsselwörter erläutert:

transparent
currentcolor
inherit

Das transparente Schlüsselwort

Das Schlüsselwort transparent wird verwendet, um eine zu erstellen Farbe transparent. Dies wird häufig verwendet, um eine transparente Hintergrundfarbe zu erstellen ein Element.

Beispiel

Hier wird die Hintergrundfarbe des <div>-Elements vollständig angezeigt transparent und das Hintergrundbild wird durchscheinen:

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

Probieren Sie es selbst aus →

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

Hinweis: Der transparent Das Schlüsselwort entspricht rgba(0,0,0,0). RGBA-Farbwerte sind eine Erweiterung von RGB-Farbwerte mit einem Alphakanal - der die Deckkraft für a angibt Farbe. Lesen Sie mehr in unserem CSS-RGB-Kapitel und in unser Kapitel „CSS-Farben“.

Das Schlüsselwort currentcolor

Das Schlüsselwort currentcolor ist wie eine Variable das den aktuellen Wert der Farbeigenschaft eines Elements enthält.

Dieses Schlüsselwort kann nützlich sein, wenn Sie möchten, dass eine bestimmte Farbe in einem konsistent ist Element oder eine Seite.

Beispiel

In diesem Beispiel ist die Rahmenfarbe des <div>-Elements blau, weil das Die Textfarbe des <div>-Elements ist blau:

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

Probieren Sie es selbst aus →

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

Beispiel

In diesem Beispiel wird die Hintergrundfarbe des <div> auf die aktuelle Farbe gesetzt Wert des Körperelements:

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

Probieren Sie es selbst aus →

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

Beispiel

In diesem Beispiel sind die Rahmenfarbe und die Schattenfarbe des <div> auf eingestellt der aktuelle Farbwert des Körperelements:

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

Probieren Sie es selbst aus →

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

Das erben-Schlüsselwort

Das Schlüsselwort inherit gibt an, dass a Die Eigenschaft sollte ihren Wert von ihrem übergeordneten Element erben.

Das Schlüsselwort inherit kann für jedes CSS verwendet werden -Eigenschaft und für jedes HTML-Element.

Beispiel

In diesem Beispiel werden die Rahmeneinstellungen von <span> geerbt das übergeordnete Element:

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

Probieren Sie es selbst aus →

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