CODEWITHSUNDEEP
htmlcss
FatDogMark
FatDogMark

Reputation: 1205

How to make parent transparent but not the child?

I was making a wrapper div wrapped all my content, I give my wrapper a background texture and I want to give opacity to it. However , while I set opacity to my wrapper, all its child , the web content incuding text and images everything turned to half transparent, how can I set the transparency to the parent only?

Upvotes: 2

Views: 4109

Answers (4)

John
John

Reputation: 323

These two line worked for me. You could use this in css.

CSS

background-color: rgba(0, 0, 0, 0.3);

opacity: 1;

Upvotes: 0

Aesthete
Aesthete

Reputation: 18848

Don't user opacity, as if will filter down. Use a background color with alpha instead.

background-color: rgba(255,255,255,0.5);

Since you are using an image, your best bet is probably baking the transparency into the image (sucks because you can't fade etc), or try moving the children out of the textures css' cascade line.

Upvotes: 3

Shailender Arora
Shailender Arora

Reputation: 7778

Hi I am mentioning the property through in which you can increase and decrease the opacity of parent container background and that will not affect the child container. It's simple see the css basically you have to use the rgba here rgb for color in background & a-alpha for opacity.

CSS

background:rgba(0,0,0,0.1);

DEMO

Upvotes: 3

PhonicUK
PhonicUK

Reputation: 13864

If an element is transparent then everything it contains will be transparent.

It sounds like what you actually want is a semi-transparent background. If it's a texture you're using then you'll need to use an image editing tool to make the texture semi-transparent and save it as a PNG.

Upvotes: 0

Related Questions