Created
February 20, 2014 01:43
-
-
Save ihorvorotnov/9105472 to your computer and use it in GitHub Desktop.
Cross-browser semi-transparent backgrounds using RGBA and IE filter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Cross-browser solution for semi-transparent backgrounds using RGBA. | |
* Read more: http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css | |
* | |
* Note: in IE ARGB AA is a HEX value, not a floating point. | |
* Note: there is some info that IE turns off ClearType with filters. | |
* | |
* 2Do: explore solution for semi-transparent foregrounds. | |
* 2Do: convert to SASS mixin. | |
*/ | |
.el { | |
/* RGB fallback for web browsers that doesn't support RGBa, except IE<=8 */ | |
background:rgb(255,0,0); | |
/* Reset background to transparent for IE<=8 and use `\9` IE hack to skip in other browsers */ | |
background: transparent\9; | |
/* RGBA */ | |
background:rgba(255,0,0,0.3); | |
/* IE <=8 ARGB gradient filter */ | |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); | |
/* Trigger hasLayout for IE */ | |
zoom: 1; | |
} | |
.el:nth-child(n) { | |
/* Prevent IE9 which supports RGBA from stacking both RGBA value and filter */ | |
filter: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment