Search code examples
cssopacityrgba

Opacity is showing different shades on different pages

I'm using opacity and it seems that it's showing as different shades on the pages I am using it on.

If you take a look here at the PS4 image: http://chrisbrighton.co.uk

...and then here at the same image... http://chrisbrighton.co.uk/Gaming.php

You'll see that there are different shades but they are all using the same CSS rules.

Any ideas why this is happening?

Thanks.

Solution

  • Your #news-container on the Gaming.php has background: #9bd7f5;. Since you're using rgba() to gain transparency, everything below or above the elements are affected by it as well.

    Instead use opacity: 0.7; in favor of rgba(). The opacity property won't affect other elements.