Loading lesson path
Overview
CSS has some special predefined color keywords that can be used with properties like color, background-color and border-color.
transparent currentcolor inherit
The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.
Formula
Here, the background color of the < div > element will be fully transparent, and the background image will show through:body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}The transparent keyword is equivalent to rgba(0,0,0,0). RGBA color values are an extension of
Formula
RGB color values with an alpha channel - which specifies the opacity for a color. Read more in ourchapter and in our CSS Colors chapter.
The currentcolor keyword is like a variable that holds the current value of the color property of an element. This keyword can be useful if you want a specific color to be consistent in an element or a page.
Formula
In this example the border color of the < div > element will be blue, because the text color of the < div > element is blue:div {
color: blue;
border: 10px solid currentcolor;
}Formula
In this example the < div >'s background color is set to the current color value of the body element:body {
color: purple;
}
div {Formula
background - color:currentcolor;
}Formula
In this example the < div >'s border color and shadow color is set to the current color value of the body element:body {
color: green;
}
div {Formula
box - shadow: 0px 0px15px currentcolor;
border: 5px solid currentcolor;
}The inherit keyword specifies that a property should inherit its value from its parent element. The inherit keyword can be used for any CSS property, and on any HTML element.
Formula
In this example the < span >'s border settings will be inherited from the parent element:div {
border: 2px solid red;
}
span {border:
inherit;
}