This page will explain the
transparent
,currentcolor
, andinherit
keywords.
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Note: The transparent
keyword is equivalent to rgba(0,0,0,0). RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color. Read more in our CSS RGB chapter and in our CSS Colors chapter.
#
The currentcolor Keyword #
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.
Example #
In this example the border color of the element will be blue, because the text color of the element is blue:
div {
color: blue;
border: 10px solid currentcolor;
}
Example #
In this example the <div>’s background color is set to the current color value of the body element:
body {
color: purple;
}
div {
background-color: currentcolor;
}
Example #
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 {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}
div {
border: 2px solid red;
}
span {
border: inherit;
}