1

I have a DIV with CSS styled background color and an opacity of 0.7. Works perfectly. BUT... inside that DIV tag there is an IMG tag. My problem is that the IMG gets the same opacity as the DIV, which I do not want. I want the IMG to be non-transparent and have tried setting "opacity: 1 !important;" for IMG, but it is still semi-transparent as the DIV.

Can anyone help, please?

rassom
  • 2,896
  • 5
  • 34
  • 45
  • 1
    Hi you can see this http://stackoverflow.com/questions/10005047/can-a-child-div-have-a-higher-opacity-than-parent-with-css/10005347#10005347 – Rohit Azad Malik Apr 13 '12 at 10:29

3 Answers3

6

you can't do this using opacity, as this always affects all child elements. you could try to use an rgba-color as background for your div instead (which is supported by all modern browsers) and leave out the opacity.

background: rgba(0, 0, 255, 0.7); // 70% opaque blue
oezi
  • 51,017
  • 10
  • 98
  • 115
  • there are also rgba gradient filters for IE6-9, may require some tinkering but it works. More info here: http://css-tricks.com/rgba-browser-support/ – Ege Apr 13 '12 at 10:43
4

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 rgb color in background & alpha for opacity.

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

or see the example:- http://jsfiddle.net/8LFLd/20/

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • I went with oezi's solution above, basically same as your solution. Thank you very much for answering. Appreciate it :) – rassom Apr 13 '12 at 11:58
2

I think you can't keep that from happening. You'll probably have to go with a img outside of the div and put in in there with some messy position: absolute; CSS. It isn't clean but whatever works. I prefer oezi's solution, but that might not be compatible for what you want to do. If it is though, you should definity go with oezi's solution.

<div>
    <img src="" alt="">
    <div style="position: absolute;">
    Content
    </div>
</div>
Daniël Voogsgerd
  • 600
  • 3
  • 12