Opacity is showing different shades on different pages

Question

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.

Answer 1

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.

Answer 2

Not sure why that seems to be happening. It seems to be something to do with using rgba alongside opacity. If I were you I would remove the background from this class. Not only does it solve your problem but it looks a lot better from a design perspective.

.hot-page-title {
height: 300px;
background: rgba(255,102,000,.7);
-webkit-transition: .7s ease-in-out;
;

Hope this helps.

Answer 3

Yes I have inspect whole code long time and #news-container id background property affected your code.So please remove or adjust as you like .Hope the answer!