CODEWITHSUNDEEP
htmlcss
Matthew James Morris
Matthew James Morris

Reputation: 93

Why do my HTML elements inherit the parent elements opacity

So i placed an image tag in my HTML doc and it seemed to inherit the opacity from the parent div element. I have tried many methods to change this but it will not work. An example:

<div style="opacity: 0.7">
<img src="http://parteetime.com/pics/wallpaper/majestic-1280-1024.jpg"/> 
</div>

Any help would be great.

Upvotes: 1

Views: 62

Answers (1)

codingrose
codingrose

Reputation: 15699

opacity makes whole element opaque.

Use rgba as background-color to prevent whole element from being opaque.

This will only make translucent background.

Try:

div{background-color:rgba(0,0,0,0.7);} //rgba -- red,green,blue,alpha

See fiddle for the difference,

Upvotes: 5

Related Questions