This page will provide an explanation of the transparent, currentcolor, and inherit keywords.
The transparent keyword is utilized to create a color with transparency, commonly employed to establish a transparent background color for an element.
Example
In this instance, the background color of the <div> element will be completely transparent, allowing the background image to be visible.
| body { background-image: url(“paper.gif”); } div { background-color: transparent; } |
|
Note: The transparent keyword is synonymous with rgba(0,0,0,0). RGBA color values extend RGB color values by incorporating an alpha channel, determining the opacity level for a color. Further details can be found in our CSS RGB and CSS Colors chapters. |
The currentcolor keyword functions akin to a variable, retaining the current value of the color property assigned to an element.
Its utility is notable when aiming to maintain consistency of a specific color within an element or across a webpage.
Example
In this example, the border color of the <div> element will be blue, as it inherits the text color of the <div> element, which is blue.
| div { color: blue; border: 10px solid currentcolor; } |
Example
In this example, the background color of the <div> is assigned the current color value of the body element.
| body { color: purple; } div { background-color: currentcolor; } |
Example
In this example, the border color and shadow color of the <div> are both assigned the current color value of the body element.
| body { color: green; } div { box-shadow: 0px 0px 15px currentcolor; border: 5px solid currentcolor; } |
The inherit keyword dictates that a property should derive its value from its parent element.
It can be applied to any CSS property and on any HTML element.
Example
In this example, the border settings of the <span> element will inherit from its parent element.
|
div { |
