Background Opacity Affecting Text Opacity

PROBLEM
Why do I always forget this? Hopefully I’ll remember why this happens this time with a simple blog post!

When you add opacity to a div, it affects the text opacity as well. Ex.

Your CSS is something like this:

.header_background {
	opacity: .8;
	color: #FFFFFF;
	background-color: #475260;
}

SOLUTION
Do not just use opacity like that. Use it like this:

.header_background {
	color: #FFFFFF;
	background: rgba(47, 52, 60, .8);
}

Now it’s nice:

Leave a Reply

Your email address will not be published. Required fields are marked *