FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Opacity

This community-built FAQ covers the “Opacity” exercise in Codecademy’s lessons on CSS.

FAQs on the CSS exercise Opacity

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

1 Like

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

In this lesson we learn about the opacity property in CSS, my question is, is there a way of changing JUST the background, or even JUST the foreground, using the opacity property, I’m aware you can just use RGBA on the color property or background-color property, but i’m wanting to know if you can change just the background or foreground using the OPACITY property

Hi! Is there a way to change the text opacity separately from the whole element?

No, @senvoz, you cannot use the opacity property to change only the background or foreground.

@warroyoalicea what you can do is use rgba color values.

I do it like that
and in CSS

background-color: white;
display: block;
line-height: 5px;
margin-left: 20px;
padding: 20px;
position: relative;
: 0.5;
opacity: 0.75;
top: 80%;
width: 60%;

the way you check the codes has a great bug
it should be in the last line of that unit and has some future which it can not have them.


First question on here so I’m sure it’s either pretty basic, or the next lesson will give me the answer!

Why does/Does the position of the opacity property within the .caption class (in this lesson example) change the effect of the property. When I put the opacity property at the bottom of the list of properties it did not work properly, whereas if it’s at the top it has the desired effect. Is there somewhere I can read about why this is the case please?



Can you show us the CSS you were using that did not work?

I ask this because we need to be sure that there are no errors in the declaration block, and because there is no insertion order in selector rulesets; they are unordered objects.

Thanks for the response.

I actually just realised the answer when I tried to replicate the error. I’d not put a ; after the term before. As I said, only just learning! :slight_smile:

1 Like