HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
This page will explain the transparent, currentcolor, and inherit keywords
The transparent
keyword is used to make a
color transparent. This is often used to make a transparent background color for
an element.
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;
}
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 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.
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;
}
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;
}
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;
}
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.
In this example the <span>'s border settings will be inherited from the parent element:
div {
border: 2px solid red;
}
span {
border:
inherit;
}