2

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?

FatDogMark
  • 1,207
  • 2
  • 16
  • 25
  • 1
    Possible Duplicate: http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-effect-in-child-div – Kevin Bowersox Nov 29 '12 at 10:43
  • If it is a texture(image), quite simply, you can't. You will have to pull the children out of it and do it that way. Or, use a transparent image(png) or use a background colour and set it with RGBA (makes background colour transparent but not children) – Andy Nov 29 '12 at 10:43

4 Answers4

3

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.

Aesthete
  • 18,622
  • 6
  • 36
  • 45
3

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

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
0

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.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • Then why the text on this example of transbox won't become transparent?http://www.w3schools.com/css/css_image_transparency.asp – FatDogMark Nov 29 '12 at 10:44
0

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

CSS

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

opacity: 1;
esentis
  • 4,190
  • 2
  • 12
  • 28
Bilal Shahid
  • 173
  • 1
  • 2
  • 8