EN
CSS - set element transparent background
3 points
In this article, we would like to show you how to set an element transparent background using CSS.
Quick solution:
xxxxxxxxxx1
div {2
background: rgba(0, 0, 255, 0.5); /* blue color with opacity 50% */3
}or:
xxxxxxxxxx1
div {2
background: blue;3
opacity: 0.5; /* <------------------ whole element opacity 50% */4
}Note: alternative solution will set whole element opacity to 50%, while the first one will set only the background opacity.
In this example, we create a transparent div element using RGBA color schema. Alpha channel is set as the fourth parameter to 0.5 which means our element will be 50% transparent.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 150px;8
}9
10
div.normal {11
background: red; /* <-------------------------- not transparent red color */12
height: 100px;13
width: 100px;14
}15
16
div.transparent {17
position: absolute;18
top: 20px;19
left: 20px;20
background: rgba(0, 0, 255, 0.5); /* <--------- blue color with opacity 50% */21
height: 100px;22
width: 100px;23
}24
25
</style>26
</head>27
<body>28
<div class="normal"></div>29
<div class="transparent"></div>30
</body>31
</html>Note: the alpha parameter (fourth parameter in RGBA) is a floating-point number between
0-1, where0means fully transparent and1not transparent color.
