Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jeremy O'Bryan
Jeremy O'Bryan
16,672 Points

Exclude Text From CSS Rules In A Div?

Hi Guys!

Having a bit of an issue with something I'm attempting to do with a CSS Div. What I want to do is fade the background of the div a bit using opacity. However, when I add the CSS rule, it's affecting all the text within the div as well. What's the best way to just fade the background of the div but keep the text within it at normal opacity? Thanks again!

3 Answers

Jeremy O'Bryan
Jeremy O'Bryan
16,672 Points
Jeremy O'Bryan
Jeremy O'Bryan
16,672 Points

Actually, I figured out that I can do what I want by using rgba instead of opacity, but that brings up another issue, say I want to do something else to the background, like filter:blur() , how can I utilize that for the background without affecting the text?

Peter Vann
Peter Vann
36,427 Points
Peter Vann
Peter Vann
36,427 Points

Hi Jeremy!

Are you using rgba for the background/background-color?

When I use something like this:

#demo {
  display: inline-block;
  text-align: center;
  width: 150px;
  height: 30px;
  padding: 50px;
  background-color: rgba(140, 240, 140, 0.5); /*** The forth argument being opacity ***/
}

I can change the opacity all I want and it doesn't affect the text color at all.

However, if you do this:

#demo {
  display: inline-block;
  text-align: center;
  width: 150px;
  height: 30px;
  padding: 50px;
  background-color: lime;
  opacity: 0.5; /*** Fades the whole thing - text and all ***/
}

Then, yes the whole element fades, text and all.

I hope that helps.

Stay safe and happy coding!

Peter Vann
Peter Vann
36,427 Points
Peter Vann
Peter Vann
36,427 Points

Hi Jeremy!

This should address your second question:

https://css-tricks.com/almanac/properties/b/backdrop-filter/

I hope that helps.

Stay safe and happy coding!