Modern browsers have support for RGBA colours, allowing you to have semi-transparent background colours. Unfortunately, this only works in awesome browsers (everything except IE 8 and below). However, IE does support a custom gradient filter. Whilst it's commonly used to render gradients (obviously), it supports alpha transparency. If you set the start and end colours to be the same, this has the same effect as setting an alpha value on the colour.

This involves quite a lot of CSS for each alpha colour you want to use. We can automate this tedious code generation through a LESS mixin. If you're still using 'pure' CSS, I'd highly suggest looking into LESS and SASS, they're extremely handy. In any case, I use a mixin similar to the following:

.rgba(@colour, @alpha)
{
	@alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
	@ieAlphaColour: argb(@alphaColour);
	
	background-color: @colour; // Fallback for older browsers
	background-color: @alphaColour; 
	
	// IE hacks
	zoom: 1; // hasLayout
	background-color: transparent\9;
	-ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
	    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7 
	
}

Note that IE requires the element to have layout in order to apply filters to it (hence the zoom: 1 hack), and IE 8 changed the filter syntax to use -ms-filter instead. This LESS mixin can be used as follows:

#blah
{
        .rgba(black, 0.5);
}

This will set the element to a 50% black background. This mixin could be converted to SASS quite easily, too. Ideally I would have liked to apply the IE styles in a better way (like using conditional comments to set classes on the element) but I couldn't get this approach working with LESS.

Hope this helps someone!

Until next time,
— Daniel

Tags design, development

Short URL for sharing: https://d.sb/B5E. This entry was posted on 1st May 2012 and is filed under Web Development. You can leave a comment if you'd like to, or subscribe to the RSS feed to keep up-to-date with all my latest blog posts!

Comments

  1. Avatar for syndrael syndrael said:

    It's just helped me.
    Thanks a lot.
    Best regards from PAris, France

    1. Avatar for Daniel15 Daniel15 said:

      Awesome, glad it helped you :)

      1. Avatar for Sébastien Pillien Sébastien Pillien said:

        Could you check this ? On my IE9 .rgba() on <h2> crashes my browser.. no problem on a <div>

        1. Avatar for Daniel15 Daniel15 said:

          It crashes the browser? Wow, that's very odd. Do you get an error message of any sort?

  2. Avatar for Bogdan Bogdan said:

    I read like 5-6 pages until I've arrived here.
    Thank you, this saved me a lot of time.

    1. Avatar for Daniel15 Daniel15 said:

      No worries, glad it helped :)

  3. Avatar for ben ben said:

    thanks this saved me a few hours!

  4. Avatar for fritzbrause fritzbrause said:

    Great stuff! Helps a lot. Tip: refer to the doc how to use mixins (http://lesscss.org/) to make it even easier for beginners. Regards from Germany

  5. Avatar for ffpiloo ffpiloo said:

    Excellent ! Thank you !

  6. Avatar for Paul Davis Paul Davis said:

    Thanks for this mate, saved my bacon. IE10, however, doesent like the way the styles are ordered, ignoring them all. Reordering them like this, works. https://gist.github.com/416...

    1. Avatar for Daniel15 Daniel15 said:

      Thanks for the info! Does the reordering work in older IE versions as well?

  7. Avatar for nottRobin nottRobin said:

    Does anyone know of a SASS equivalent?

  8. Avatar for Ban Ban said:

    Thank you so much =)

    1. Avatar for Daniel15 Daniel15 said:

      Glad to help!

  9. Avatar for Tinashe Gunda Tinashe Gunda said:

    This is awesome

  10. Avatar for The Hung The Hung said:

    Thanks for useful mixin. But I need your help, how can I apply this code without affect child element?