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:
xxxxxxxxxx1
div {2
background: rgba(0, 0, 255, 0.5); /* blue color with opacity: 50%; */3
}
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%.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 150px;8
}9
10
div {11
height: 100px;12
width: 100px;13
background: orange;14
}15
16
.transparent-background {17
border: 3px solid;18
position: absolute;19
top: 50px;20
left: 50px;21
22
/* required */23
background: rgba(255, 0, 0, 0.5); /* red color with opacity: 50%; */24
}25
26
</style>27
</head>28
<body>29
<div></div>30
<div class="transparent-background">Example text...</div>31
</body>32
</html>