0

Wasn't sure, how to name this question, but, I've ran into a problem (minor, but still), I have a main div container, which is basically a white text box, that is 92% opaque:

     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
filter: alpha(opacity=92);
opacity:.92;

This works fine, however, on some pages I have a Jplayer audio player and that turns 92% transparent too. Does anyone know a way where I can still have the transparency, but keep objects inside the main div container fully opaque?

Byonex
  • 21
  • 8
  • you can set a transparent background-color of an object, but you can not have cildren having a higher opacity than it's parent item. – Nico O Mar 01 '14 at 16:41
  • Please, post the DIV section and the CSS code including the name and brackets so we can help you faster. – Exel Gamboa Mar 01 '14 at 16:41
  • Post your HTML code. And to fix this you need to have "the full opacity" elements outside the element having the filter added to it, or set filter to only the inner that should have it. – Asons Mar 01 '14 at 16:41
  • I just used background: rgba(255, 255, 255, 0.92); as suggested by thesublimeobject and it has done the trick! :) – Byonex Mar 01 '14 at 16:48

3 Answers3

1

Use This CSS-

#div{
    background: rgba(255, 255, 255, 0.92);
}

Then Use this script for browser compatibility in IE.

<!--[if IE]>
   <style type="text/css">
       .color-block { 
           background:transparent;
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
           zoom: 1;
       } 
    </style>
<![endif]-->
M B Parvez
  • 808
  • 6
  • 16
0

Use background: rgba(255, 255, 255, 0.92);

When you use the background property it only applies the alpha (the last value, opacity) to the background itself. Use this instead of the ms-filter as it works across all **modern browsers.

thesublimeobject
  • 1,393
  • 1
  • 17
  • 22
  • No, it does not work cross browser. IE8 does not support rgba() – Asons Mar 01 '14 at 16:43
  • except ie {8,7,6,5.5}. – bashleigh Mar 01 '14 at 16:44
  • The issue is though, I am using a gradient background colour – Byonex Mar 01 '14 at 16:45
  • I guess I could try this one instead though, since the gradient isn't too noticeable with the transparency on – Byonex Mar 01 '14 at 16:46
  • You could just add an image for ie 8 and below using. – bashleigh Mar 01 '14 at 16:47
  • IE 8 is a problem, true, but my site is only going to be used on Chrome, mostly, very unlikely a randomer will stumble across and try to use it on IE 8 – Byonex Mar 01 '14 at 16:50
  • You can always set some kind of other fallback for IE8 if you're concerned about it, but you're right, a high percentage of your traffic will be IE9+, Chrome, Firefox, Safari, Opera. – thesublimeobject Mar 01 '14 at 16:52
  • I can nearly guarantee that my traffic will be Chrome only, due to the website purpose and audience, especially since I know personally most of the users, however, I think an image fallback for IE 8 sounds a good idea, like Bento said – Byonex Mar 01 '14 at 16:55
0
#parent{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
}
#parent>*{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

This'll make the parent's alpha 92% and it's children 100%. But I can't remember if this sets the Opacity of the element or the alpha? Because if it sets the opacity of the element. Every element within the parent will also be affected. Another way would be to use an background image, selecting ie 8 and below to use an alternative method or some very awkward positioning.

bashleigh
  • 8,813
  • 5
  • 29
  • 49
  • Did you try this yourself? .. Because if I'm not wrong this doesn't work on IE6/7/8 – Asons Mar 01 '14 at 16:54
  • Thanks, I used the RGB option and it worked fine. My main idea was to have a gradient background, but since it's transparent, I don't mind too much :P – Byonex Mar 01 '14 at 16:54
  • Check "WebDevRon"'s solution. It's good and will fix IE too. – Asons Mar 01 '14 at 16:56
  • @PellePenna that's the way I was thinking. Been awhile since I did anything for IE! Didn't think this would've worked I just remember doing it, my bad! – bashleigh Mar 01 '14 at 16:59