Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Compass cross-browser RGBa background mixin
.blackAlpha50 {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#80000000', endColorstr='#80000000');
background: transparent;
background: rgba(0, 0, 0, 0.5);
:root .blackAlpha50 {
filter: none\0/IE9;
// Provides cross-browser RGBa background.
// Takes a RABa color as the argument, e.g. rgba(0, 0, 0, 0.5) for black background with 50% opacity.
// @param $color
// A RGBa color
@mixin rgba-background($color){
@include filter-gradient($color, $color);
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
background: transparent;
// set filter as none for IE9+, because IE9+ supprot RGBa
:root & {
filter: none\0/IE9;}
background: $color;
.blackAlpha50 {
@include rgba-background(rgba(0, 0, 0, .5));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.