Answered Jan 18, 2020 · 189 votes
now you can use rgba in CSS properties like this:
.class { background: rgba(0,0,0,0.5);}-
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
more info http://css-tricks.com/rgba-browser-support/
Answered Oct 23, 2014 · 67 votes
Keep these three options in mind (you want #3):
1) Whole element is transparent:
2) Whole element is somewhat transparent:
3) Just the background of the element is transparent:
background-color: transparent;-
Answered Aug 29, 2021 · 37 votes
To achieve it, you have to modify the background-color
Ways to create a (semi-) transparent color:
.transparent{ background-color: transparent;}-
.semi-transparent-yellow{ background-color: rgba(255, 255, 0, 0.5);}.transparent{ background-color: hsla(0, 0%, 0%, 0);}
.semi-transparent-yellow{ background-color: rgb(255, 255, 0, 0.5);}.transparent{ background-color: hsl(0, 0%, 0%, 0);}
.semi-transparent-yellow{ background-color: rgba(255 255 0 / 0.5);}.transparent{ background-color: hsla(0 0% 0% / 0);}
.semi-transparent-yellow{ background-color: #FFFF0080;}.transparent{ background-color: #0000;}
- ["The CSS color name transparent "," creates a completely transparent color.","","Usage:","",""," .transparent{"," background-color: transparent;","}"," ","",""]
- ["Using rgba "," or hsla "," color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.","","Usage:","",""," .semi-transparent-yellow{"," background-color: rgba(255, 255, 0, 0.5);","}",".transparent{"," background-color: hsla(0, 0%, 0%, 0);","}"," ","","","","As of the CSS Color Module Level 4, rgb "," and hsl "," works the same way as rgba "," and hsla "," does, accepting an optional alpha value. So now you can do this:","",""," .semi-transparent-yellow{"," background-color: rgb(255, 255, 0, 0.5);","}",".transparent{"," background-color: hsl(0, 0%, 0%, 0);","}"," ","","","","The same update to the standard (Color Module Level 4) also brought in support for space-separated values:","",""," .semi-transparent-yellow{"," background-color: rgba(255 255 0 / 0.5);","}",".transparent{"," background-color: hsla(0 0% 0% / 0);","}"," ","","I'm not sure why would these two be any better than the old syntax, so consider using the a -suffixed, comma-separated variants for greater support.","",""]
- ["Besides the already mentioned solutions, you can also use the HEX format with alpha value ( #RRGGBBAA "," or #RGBA "," notation).","","That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's already implemented in larger browsers (sorry, no IE).","","This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 ( FF ).","","Usage:","",""," .semi-transparent-yellow{"," background-color: #FFFF0080;","}",".transparent{"," background-color: #0000;","}"," ","",""]
You can try them out as well:
div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: transparent;}
<img src="https://via.placeholder.com/200x100"><div> Using `transparent`</div>
div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: hsla(250, 100%, 50%, 0.3);}
<img src="https://via.placeholder.com/200x100"><div> Using `hsla()`</div>
div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: rgb(0, 255, 0, 0.3);}
<img src="https://via.placeholder.com/200x100"><div> Using `rgb()`</div>
div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: hsla(70 100% 50% / 0.3);}
<img src="https://via.placeholder.com/200x100"><div> Using `hsla()` with spaces</div>
div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: #FF000060}
<img src="https://via.placeholder.com/200x100"><div> Using `#RRGGBBAA`</div>
- [" transparent :","","","","","","",""," div {"," position: absolute;"," top: 50px;"," left: 100px;"," height: 100px;"," width: 200px;"," text-align: center;"," line-height: 100px;"," border: 1px dashed grey;"," "," background-color: transparent;","} ","",""," <img src=\"https://via.placeholder.com/200x100\">","<div>"," Using `transparent`","</div> ","","","",""]
- [" hsla() :","","","","","","",""," div {"," position: absolute;"," top: 50px;"," left: 100px;"," height: 100px;"," width: 200px;"," text-align: center;"," line-height: 100px;"," border: 1px dashed grey;"," "," background-color: hsla(250, 100%, 50%, 0.3);","} ","",""," <img src=\"https://via.placeholder.com/200x100\">","<div>"," Using `hsla()`","</div> ","","","",""]
- [" rgb() :","","","","","","",""," div {"," position: absolute;"," top: 50px;"," left: 100px;"," height: 100px;"," width: 200px;"," text-align: center;"," line-height: 100px;"," border: 1px dashed grey;"," "," background-color: rgb(0, 255, 0, 0.3);","} ","",""," <img src=\"https://via.placeholder.com/200x100\">","<div>"," Using `rgb()`","</div> ","","","",""]
- [" hsla() with space-separated values:","","","","","","",""," div {"," position: absolute;"," top: 50px;"," left: 100px;"," height: 100px;"," width: 200px;"," text-align: center;"," line-height: 100px;"," border: 1px dashed grey;"," "," background-color: hsla(70 100% 50% / 0.3);","} ","",""," <img src=\"https://via.placeholder.com/200x100\">","<div>"," Using `hsla()` with spaces","</div> ","","","",""]
- [" #RRGGBBAA :","","","","","","",""," div {"," position: absolute;"," top: 50px;"," left: 100px;"," height: 100px;"," width: 200px;"," text-align: center;"," line-height: 100px;"," border: 1px dashed grey;"," "," background-color: #FF000060","} ","",""," <img src=\"https://via.placeholder.com/200x100\">","<div>"," Using `#RRGGBBAA`","</div> ","","","",""]
