Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set the opacity only to background color not on the text in CSS
In CSS, we can set the background for the particular HTML element using the ‘background’ property of CSS. Sometimes, we may require to decrease the background colour's opacity without affecting the HTML element's content.
We can decrease the background color's opacity by decreasing the alpha variable's value while assigning the color value to the ‘background color’ property.
Syntax
Users can follow the syntax below to set the opacity only to background color not on the text in CSS.
background: rgba(255, 0, 0, opacity); or background-color: hsla(0, 100%, 30%, opacity);
Users can set the background color using the ‘rgba’ or ‘hsla’; here ‘a’ represents the alpha opacity which takes a value between 0 and 1.
Example 1
In the example below, we created the HTML div element and set the background color using the ‘background’ property. We have used the ‘rgba’ values to set the background color. We have set the ‘red’ color as a background with an opacity ‘of 0.1’, which users can observe in the output.
<html>
<head>
<style>
.div {
background: rgba(255, 0, 0, 0.1);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity without affecting the content of the div element</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Example 2
In the example below, we have used the ‘background-color’ CSS property to set the background for the HTML div element. Also, we have used the ‘hsla’ values as a background with the ‘0.2’ alpha opacity values.
Users can increase or decrease the opacity values between 0 to 1 and observe the changes in the background color.
<html>
<head>
<style>
.div {
background-color: hsla(0, 100%, 30%, 0.2);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
<div class = "div">
This is a content of the div element.
</div>
</body>
</html>
Example 3
We can separate the background div from the content div and set the background color for the div element with lower opacity.
Here, we have a parent div. In the parent div, we have background and content div. The background and content div dimensions are the same as the parent div. We can set the z-index properties for both div elements to show the content div above the background div.
After that, we can decrease the opacity of only the background div using the ‘opacity’ property of CSS. In such a way, we can put the background div below the content div and play with the opacity of the background div.
<html>
<head>
<style>
#parent {
width: 500px;
height: 150px;
position: relative;
}
#content {
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 1.2rem;
top: 0;
left: 0;
}
#background {
background: blue;
filter: alpha(opacity=30);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
<div id = "parent">
<div id = "background"></div>
<div id = "content"> This is the content of the div element.</div>
</div>
</body>
</html>
Users learned to set the opacity for the background color without affecting the opacity of the text or the div content. Users can decrease the opacity of colour while using the ‘rgba’ or ‘hsla’ values. If users have an image or anything else as a background, they can create a separate div for the background and content and decrease the background div's opacity.
6K+ Views
To Continue Learning Please Login