Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
SCSS Mixin for Cross-Browser Semi-Transparent Background
@mixin semi-transparent-background($color, $opacity) {
$red: red($color);
$green: green($color);
$blue: blue($color);
$hex_color: rgb($red,$green,$blue);
$hex_color_with_alpha: rgba($color,$opacity);
$ie_hex_color: ie-hex-str($hex_color_with_alpha);
background: $hex_color;
background: $hex_color_with_alpha;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_hex_color}, endColorstr=#{$ie_hex_color});
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_hex_color}, endColorstr=#{$ie_hex_color});
}
// Background: http://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method
// For any element that you want a semi-transparent background, include this mixin
// For ie, you also need to add the following to your document head and add the .semi-transparent class to your same container
// <!--[if lt IE 10 ]> <style>.semi-transparent {background: transparent}</style> <![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment