Introduction to CSS Color Transparent
Transparent color in CSS makes background elements visible from another top element of the page. Transparent color can be applied with background-color property and color. If we take background-color as transparent then it makes backside elements of background completely visible. But in real-time we don’t want that we need semitransparent colors. The semitransparent feature can be achieved through rgba value with background color and color property.
Real-Time Usage: If the client wants his/her page background color or text color lighter than actual color or if he wants to look things from on top of the element then we used transparent background color and color properties with rgba values.
How does Transparent color works in CSS?
As we discussed transparent color can be applied with background color and color properties.
Below are the given syntaxes,
Syntax 1:
div
{
background-color: transparent;
}
Background-color with transparent value makes background color completely transparent (becomes disappear)
Syntax 2:
div
{
background-color: rgba(value1, value2, value3, value4);
}
- Value1: Gives red color between 0 to 255 or 0 to 100%
- Value2: Gives green color between 0 to 255 or 0 to 100%
- Value3: Gives blue color between 0 to 255 or 0 to 100%
- Value4: It’s an alpha parameter that gives transparency between 0 to 1. 0 means fully transparent and 1 means fully opaque.
We can set background-color to red, green and blue colors with required percentage visibility.
Syntax 3:
div
{
color: transparent;
}
Color of text with transparent value makes color completely transparent (becomes disappear).
4.5 (8,431 ratings)
View Course
Syntax 4:
div
{
color: rgba(value1, value2, value3, value4);
}
We can set the color of the text to red, green and blue colors with required percentage visibility.
Examples of CSS Color Transparent
Below are the examples for CSS:
Example #1
Background color and color with transparent value:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BackgroundColorAndColorTransparent.css">
<title>Transparent Color</title>
</head>
<body>
<font color="green" style=""><h2>Background color and color
properties with transparent value</h2></font>
<div class="topBColor">Hi,I am with background color</div>
<div class="tBColor">Hi,I am with background color and
transparent value</div>
<div class="topColor">Hi,I am with text color</div>
<div class="tColor">Hi,I am with text color and transparent value</div>
</body>
</html>
CSS Code:
.topBColor {
font-size: 30px;
width:500px;
background-color: blue;
margin:10px;
border: 10px double brown;
}
.tBColor {
font-size: 30px;
width:500px;
background-color: transparent;
margin:10px;
border: 10px double brown;
}
.topColor {
font-size: 30px;
width:500px;
color:brown;
margin:10px;
margin:10px;
border: 10px double brown;
}
.tColor {
font-size: 30px;
width:500px;
color:transparent;
margin:10px;
margin:10px;
border: 10px double brown;
}
Output before transparent:
Output after transparent:
Explanation:
In the above code first and 3rd paragraphs taken background and color properties taken without transparent respectively. So, in the final output, these 2 paragraphs outputs can’t be changed.
Whereas in 2nd and last paragraph background color and color have taken with transparency respectively. So, in the final output, these 2 paragraphs output changed. Because transparent property gives 100% transparency so background color in 2nd paragraph and text in the last paragraph disappears.
Example #2
Background color and color with rgba values:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BackgroundColorAndColorRGBA.css">
<title>Transparent Color</title>
</head>
<body>
<font color="brown" style=""><h2>Background color and color
properties with RGBA values</h2></font>
<div class="redB">Hi,I RED am with out transparent background color</div>
<div class="redBCR">Hi,I RED am with transparent background color by RGBA color</div>
<div class="redC">Hi,I RED am without transparent text color</div>
<div class="redRC">Hi,I am with transparent text color by RGBA value</div>
<div class="greenB">Hi,I am GREEN with out transparent background color</div>
<div class="greenBCR">Hi,I am GREEN with transparent background color by RGBA color</div>
<div class="greenC">Hi,I am GREEN with transparent text color by RGBA value</div>
<div class="greenRC">Hi,I am GREEN with transparent tex color by RGBA value</div>
<div class="blueB">Hi,I am GREEN with out transparent background color</div>
<div class="blueBCR">Hi,I am GREEN with transparent background color by RGBA color</div>
<div class="blueC">Hi,I am GREEN with transparent text color by RGBA value</div>
<div class="blueRC">Hi,I am GREEN with transparent tex color by RGBA value</div>
</body>
</html>
CSS Code:
.redB {
font-size: 30px;
width:500px;
background-color: red;
margin:10px;
border: 10px double brown;
}
.redBCR {
font-size: 30px;
width:500px;
background-color: rgba(255,0,0,0.4);
margin:10px;
border: 10px double brown;
}
.redC {
font-size: 30px;
width:500px;
color:red;
margin:10px;
border: 10px double brown;
}
.redRC {
font-size: 30px;
width:500px;
color:rgba(255,0,0,0.4);;
margin:10px;
border: 10px double brown;
}
.greenB {
font-size: 30px;
width:500px;
background-color: green;
margin:10px;
border: 10px double brown;
}
.greenBCR {
font-size: 30px;
width:500px;
background-color: rgba(0,255,0,0.4);;
margin:10px;
border: 10px double brown;
}
.greenC {
font-size: 30px;
width:500px;
color:green;
margin:10px;
border: 10px double brown;
}
.greenRC {
font-size: 30px;
width:500px;
color:rgba(0,255,0,0.4);;
border: 10px double brown;
}
.blueB {
font-size: 30px;
width:500px;
background-color: blue;
margin:10px;
border: 10px double brown;
}
.blueBCR {
font-size: 30px;
width:500px;
background-color: rgba(0,0,255,0.4);
margin:10px;
border: 10px double brown;
}
.blueC {
font-size: 30px;
width:500px;
color:brown;
margin:10px;
border: 10px double brown;
}
.blueRC {
font-size: 30px;
width:500px;
color:rgba(0,0,255,0.4);;
margin:10px;
border: 10px double brown;
}
Output:
Explanation:
In the above example background color without rgba property value and background color with rgba property value. In the above example text color without rgba property value and text color with rgba property value. The above output clearly distinguishes what happens if we applied rgba value to the background color and color. rgba changes the color in between 0 to 1 value. 0 means fully transparent and 1 means fully opaque.
Example #3
Background color with transparent value makes visible background image:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BackgroundImageWithRGBA.css">
<title>Transparent Color</title>
</head>
<body>
<div>
<h1>First</h1>
</div>
<div class="second">
<h1>Second</h1>
</div>
</body>
CSS Code:
body {
background: url("m1.jpg") aqua;
}
div {
background-color: gray;
border: 10px solid maroon;
padding: 40px;
margin: 40px;
}
.second {
background-color: transparent;
}
Output:
Explanation:
In the above code First header is taken without transparent so the background portion is not visible, but the Second header is taken with transparent, so the background image portion is completely visible (transparent gives 100% transparency).
Conclusion
Transparent color can be applied with background-color and color properties and transparency color can also be achieved by rgba property value.
Recommended Articles
This is a guide to CSS Color Transparent. Here we discuss the introduction, how does Transparent color works in CSS, Syntax and the Examples with outputs. You can also go through our other suggested articles to learn more –
