Transparent content is among the most common requests in web design. As part of a beautiful design, we often want to make some content slightly transparent. It is also one of the widespread mistakes among those with less experience in CSS. Quite often, when trying to make background transparent, developers end up with transparent content also. In this post, I am describing how to make the background only transparent and the difference between the two most commonly used CSS properties for that, opacity and background.
Opacity
Opacity is the rule most developers go to when trying to make content transparent. The problem with it is that it doesn’t make just your background transparent; it also makes content inside of it.
Sometimes, this is something you want. There might be an image you want transparent, or it could be part of your hover effect. But if you have text inside, you want it readable. And that can be hard if it is transparent.
Background RGBA
There are multiple ways you can define the background of the element. You can use the URL of an image, but also, if you want to set the color, there are options like hex code, RGB, RGBA and color name. To have transparency, you can use RGBA, where last, fourth parameter is alpha, amount of transparency. Just like in opacity property, this value is from zero to one, inclusive, where zero means fully transparent and one not transparent at all. What makes this property different from opacity is that content is still not transparent, and only the background has transparency.
Wrap up
There are many other ways to do this. You could have a separate element in the background having transparency, or maybe using transparent PNG as background. But these are the two most common ways to do it. And two ways that introduce the most significant confusion among new CSS developers. After this post, I hope it is all a bit clearer.
For more, you can follow me on Twitter, LinkedIn, or GitHub.
Top comments (0)