Transparent Children

Part of the work LDC have been doing for Wellesley Information Services on the Socialbizug.org site has been a upgrade of the home page

One of the upgrades was a overhaul of the Content Spotlight (basically a carousel of stories), but it had a niggly bug that was identified, in which the text showing inside a semi transparent area that was its self semi transparent

 

Just does not quite right does it? the CSS for this is as follows

div.content {
    background:#000;
    opacity:0.65;
    filter:alpha(opacity=90);
    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);  
}

Playing with the CSS Opacity property of the child text properties makes no difference and that is totally expected, Opacity works like that (boooo!!), the traditional work around if you want none transparent text inside a transparent element is to NOT have the text/object as a child, but rather a peer and then move it into the correct place via css, for this situation that sucks as the whole Content Spotlight is generated via Java script, thankfully we have a lovely little alternative for modern browsers and that is the [RGBA Colors](http://www.w3schools.com/cssref/css_colors_legal.asp) setting for the background property, which allows you to set the Red Green Blue and Opacity values for an element and this does not ruffle down to the child elements, like so:

div.content {
    background:#000;
    /* opacity:0.65;
   filter:alpha(opacity=90);
   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);  IE */
        background: rgba(0, 0 ,0 ,.65);
}

Which suddenly fixes our problem and makes everything look nice again.

Leave a Reply

Your email address will not be published. Required fields are marked *