While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:
.content, #primary {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);
}
.page-title, .singular-page-title {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}
This is the result:
You can see that the result is not very pretty! The font doesn’t seem to render very well.
I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:
Much better!
Conclusion: I’ll use the PNG fallback method.
Have you experienced this issue? Is there a fix?
Leave your comments!
After reading