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:


Deprecated: Function get_currentuserinfo is deprecated since version 4.5.0! Use wp_get_current_user() instead. in /home/niles38/longlivethemonkey.com/syntaxnotes/wp-includes/functions.php on line 6031

Leave a Reply

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