Opacity of div s background without affecting contained element in IE 8

Question

I want to set Opacity of div s background without affecting contained element in IE 8  have a any solution and don t answer to set 1 X 1  png image and set opacity of that image because I am using dynamic opacity and color admin can change that  I used that but not working in IE 8   alpha       filter  alpha opacity 30       -moz-opacity  0 3      -khtml-opacity  0 3      opacity  0 3      and  rgba 0 0 0 0 3    also

User · Answer

Use RGBA or if you hex code then change it into rgba. No need to do some presodu element css.

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

OR

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;

User · Answer

it s simple only you have do is to give  background  rgba 0 0 0 0 3     amp  for IE use this filter  background  transparent  zoom  1      filter  progid DXImageTransform Microsoft gradient startColorstr  4C000000 endColorstr  4C000000      IE 6  amp  7    -ms-filter   progid DXImageTransform Microsoft gradient startColorstr  4C000000 endColorstr  4C000000       IE8      you can generate your rgba filter from here http   kimili com journal rgba-hsla-css-generator-for-internet-explorer

User · Answer

What about this approach    x000D   x000D    lt head gt  x000D    lt style type  text css  gt  x000D    div gradient   x000D     color   000000  x000D     width  800px  x000D     height  200px  x000D      x000D    div gradient after   x000D     background  url SOME BACKGROUND   x000D     background-size  cover  x000D     content     x000D     position absolute  x000D     top 0  x000D     left 0  x000D     width inherit  x000D     height inherit  x000D     opacity 0 1  x000D      x000D    lt  style gt  x000D    lt  head gt  x000D    lt body gt  x000D     lt div class  gradient  gt Text lt  div gt  x000D    lt  body gt  x000D   x000D   x000D

User · Answer

Try setting the z-index higher on the contained element

User · Answer

Maybe there s a more simple answer  try to add any background color you like to the code  like background-color   fff    alpha    background-color   fff   opacity  0 8   filter  alpha opacity 80

User · Answer

The opacity style affects the whole element and everything within it  The correct answer to this is to use an rgba background colour instead   The CSS is fairly simple    myelement       background  rgba 200  54  54  0 5          where the first three numbers are the red  green and blue values for your background colour  and the fourth is the  alpha  channel value  which works the same way as the opacity value   See this page for more info  http   css-tricks com rgba-browser-support   The down-side  is that this doesn t work in IE8 or lower  The page I linked above also lists a few other browsers it doesn t work in  but they re all very old by now  all browsers in current use except IE6 7 8 will work with rgba colours   The good news is that you can force IE to work with this as well  using a hack called CSS3Pie  CSS3Pie adds a number of modern CSS3 features to older versions of IE  including rgba background colours   To use CSS3Pie for backgrounds  you need to add a specific -pie-background declaration to your CSS  as well as the PIE behavior style  so your stylesheet would end up looking like this    myelement       background  rgba 200  54  54  0 5       -pie-background   rgba 200  54  54  0 5       behavior  url PIE htc       Hope that helps    EDIT   For what it s worth  as others have mentioned  you can use IE s filter style  with the gradient keyword  The CSS3Pie solution does actually use this same technique behind the scenes  but removes the need for you to mess around directly with IE s filters  so your stylesheets are much cleaner   it also adds a whole bunch of other nice features too  but that s not relevant to this discussion

User · Answer

opacity on parent element sets it for the whole sub DOM tree  You can t really set opacity for certain element that wouldn t cascade to descendants as well  That s not how CSS opacity works I m afraid   What you can do is to have two sibling elements in one container and set transparent one s positioning    lt div id  container  gt       lt div id  transparent  gt  lt  div gt       lt div id  content  gt  lt  div gt   lt  div gt    then you have to set transparent position  absolute relative so its content sibling will be rendered over it   rgba can do background transparency of coloured backgrounds  rgba colour setting on element s background-color will of course work  but it will limit you to only use colour as background  No images I m afraid  You can of course use CSS3 gradients though if you provide gradient stop colours in rgba  That works as well   But be advised that rgba may not be supported by your required browsers   Alert-free modal dialog functionality  But if you re after some kind of masking the whole page  this is usually done by adding a separate div with this set of styles   position  fixed  width  100   height  100   z-index  1000     some high enough value so it will render on top    opacity   5  filter  alpha opacity 50     Then when you display the content it should have a higher z-index  But these two elements are not related in terms of siblings or anything  They re just displayed as they should be  One over the other

User · Answer

It affects the whole child divs when you use the opacity feature with positions other than absolute  So another way to achieve it not to put divs inside each other and then use the position absolute for the divs  Dont use any background color for the upper div

[css] Opacity of div's background without affecting contained element in IE 8?

Examples related to css

Examples related to internet-explorer-8

Examples related to opacity