EN
CSS - set background opacity only (not whole element)
0
points
In this article, we would like to show you how to set background opacity only and remain the whole element not transparent using CSS.
Quick solution:
div {
background: rgba(0, 0, 255, 0.5); /* blue color with opacity: 50%; */
}
Practical example
In this example, we create a transparent background using RGBA alpha parameter (the fourth parameter) set to 0.5, which means we set the background opacity to 50%.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 150px;
}
div {
height: 100px;
width: 100px;
background: orange;
}
.transparent-background {
border: 3px solid;
position: absolute;
top: 50px;
left: 50px;
/* required */
background: rgba(255, 0, 0, 0.5); /* red color with opacity: 50%; */
}
</style>
</head>
<body>
<div></div>
<div class="transparent-background">Example text...</div>
</body>
</html>