Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
To set the opacity only to background color not on the text in CSS, it can help in creating overlays cards or popups. 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.
In this article, we are having three div boxes with background color, our task is to set the opacity only to background color not on the text in CSS.
Approaches to Set the Opacity only to Background Color
Here is a list of approaches to set the opacity only to background color not on the text in CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Setting Background Opacity Using rgba
To set the opacity only to background color not on the text in CSS, we will be using CSS background property with rgba value and adjusting the opacity using alpha value.
- We have used div elements to create three boxes and set the padding of the box.
- Then, we have used CSS background property to set the background color of the box using rgba value.
- We have used three boxes to show different opacity values which are 30%, 70% and the original color.
Example
Here is a complete example code implementing above mentioned steps to set the opacity only to background color not on the text using rgba value.
<html>
<head>
<style>
div {
background: rgb(4, 175, 47);
padding: 30px;
}
.thirty {
background: rgba(4, 175, 47, 0.3);
}
.seventy {
background: rgba(4, 175, 47, 0.7);
}
.original {
background: rgba(4, 175, 47, 1);
}
</style>
</head>
<body>
<h3>
Setting opacity only to background color
not on the text in CSS
</h3>
<p>
In this example we have used <strong>rgba
</strong> value to set the opacity only to
background color not on the text in CSS.
</p>
<div class="thirty">
Background with 30% opacity
</div>
<div class="seventy">
Background with 70% opacity
</div>
<div class="original">
Background with default opacity
</div>
</body>
</html>
Setting Background Opacity Using hsla
In this approach to set the opacity only to background color not on the text in CSS, we will be using CSS background-color property with hsla value and adjusting the opacity using alpha value.
- We have used CSS background-color property to set the background color of thr box using hsla value.
- Then, We have used three boxes to show different opacity values which are 30%, 70% and the original color.
Example
Here is a complete example code implementing above mentioned steps to set the opacity only to background color not on the text using hsla value.
<html>
<head>
<style>
div {
padding: 30px;
}
.thirty {
background-color: hsla(135, 96%, 35%, 0.3);
}
.seventy {
background-color: hsla(135, 96%, 35%, 0.7);
}
.original {
background-color: hsla(135, 96%, 35%, 1);
}
</style>
</head>
<body>
<h3>
Setting opacity only to background color
not on the text in CSS
</h3>
<p>
In this example we have used <strong>hsla
</strong> value to set the opacity only to
background color not on the text in CSS.
</p>
<div class="thirty">
Background with 30% opacity
</div>
<div class="seventy">
Background with 70% opacity
</div>
<div class="original">
Background with default opacity
</div>
</body>
</html>
Conclusion
In this article, to set the opacity only to background color not on the text in CSS, 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.
8K+ Views
