CODEWITHSUNDEEP
htmlcss
HelloWorldNoMore
HelloWorldNoMore

Reputation: 317

Background color of child element changed by parent background?

Html:

<body>
    <div id="container"></div>
</body>

Css:

body{
    background:#f06226;//dark orange
}

#container{
    background:rgba(255,165,0, 0.8);//orange
}

When I change background color to black rgb(0, 0, 0), the container background changes to brown instead of remaining orange. Why does this happen and how do I prevent it ?

Upvotes: 0

Views: 161

Answers (2)

wmeade
wmeade

Reputation: 359

This is happening because you have opacity defined on your #container background.

background:rgba(255,165,0, 0.8);//orange

The 0.8 defines an 80% opacity so your #container has some transparency, which causes the black background from your body to blend in. You can change that to a 1 OR change your #container code to background:rgb(255,165,0);//orange

Upvotes: 1

user3413723
user3413723

Reputation: 12233

It looks like the opacity of .8 is causing the two colors blend. Try changing the last number in the container style from 0.8 to 1.

Upvotes: 0

Related Questions