Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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, you can use RGBA or HSLA color values with an alpha channel. This technique is particularly useful for creating overlays, cards, or popups where you want the background to be semi-transparent while keeping the text fully opaque.
Syntax
/* Using RGBA */
selector {
background-color: rgba(red, green, blue, alpha);
}
/* Using HSLA */
selector {
background-color: hsla(hue, saturation, lightness, alpha);
}
Method 1: Using RGBA Values
The RGBA color model allows you to specify red, green, blue values (0-255) and an alpha value (0-1) for transparency. The alpha value controls only the background opacity, leaving text unaffected
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding: 20px;
margin: 10px 0;
color: #000;
font-weight: bold;
}
.opacity-30 {
background-color: rgba(255, 0, 0, 0.3);
}
.opacity-70 {
background-color: rgba(255, 0, 0, 0.7);
}
.opacity-100 {
background-color: rgba(255, 0, 0, 1);
}
</style>
</head>
<body>
<div class="box opacity-30">
Background with 30% opacity (RGBA)
</div>
<div class="box opacity-70">
Background with 70% opacity (RGBA)
</div>
<div class="box opacity-100">
Background with 100% opacity (RGBA)
</div>
</body>
</html>
Three red boxes with varying background opacity levels appear on the page. The text remains fully opaque and readable in all boxes, while the backgrounds become progressively more transparent from 30% to 100% opacity.
Method 2: Using HSLA Values
HSLA uses hue (0-360), saturation (0-100%), lightness (0-100%), and alpha (0-1) values. This method provides better color control for design purposes
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-family: Arial, sans-serif;
}
.hsla-box {
padding: 25px;
margin: 15px 0;
color: #333;
font-size: 16px;
border-radius: 5px;
}
.blue-30 {
background-color: hsla(240, 100%, 50%, 0.3);
}
.blue-60 {
background-color: hsla(240, 100%, 50%, 0.6);
}
.blue-90 {
background-color: hsla(240, 100%, 50%, 0.9);
}
</style>
</head>
<body>
<div class="container">
<h3>HSLA Background Opacity Examples</h3>
<div class="hsla-box blue-30">
Blue background with 30% opacity
</div>
<div class="hsla-box blue-60">
Blue background with 60% opacity
</div>
<div class="hsla-box blue-90">
Blue background with 90% opacity
</div>
</div>
</body>
</html>
Three blue boxes with different background opacity levels are displayed. The text remains fully visible and opaque while the blue backgrounds show varying levels of transparency from light to dark.
Key Benefits
| Method | Pros | Best For |
|---|---|---|
| RGBA | Direct RGB color control | When you know exact RGB values |
| HSLA | Intuitive color adjustments | Design-focused color selection |
Conclusion
Using RGBA or HSLA color values with alpha channels is the most effective way to set background opacity without affecting text. This approach maintains text readability while creating visually appealing transparent backgrounds for modern web designs.
8K+ Views
