CSS Opacity Guides
Let's be transparent: Opacity is an important part of a CSS tookkit.
This is a collection of top and trending guides written by the community on subjects related to CSS Opacity properties. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.
CSS can be tricky, and at times, frustrating to work with. One of the things I had trouble figuring out was how to change the opacity of a background without it also affecting the opacity of the text it contained.
Hey dude ! How can I make a gradient opacity in CSS?
Oops! Now, we can't see our text that well. Maybe if we try reducing the opacity of our background image we can resolve this issue.
Basically, I had set opacity to 0.85 on the "modal" that I was creating. I decided to create a 0.5 opacity wrapper that covered the remainder of the screen (this is something that I've done MANY times on several projects without issue) ... that's where the problem occurred.
And to make the text stand out, you want to change the opacity of that background image in CSS so that it’s semi-transparent. But you’ve tried, and you can’t change the opacity of the background image without also affecting the text or other child elements!
Happy CSS Opacity coding!