Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

IE background with filter opacity

IE background with filter opacity

Problem

figure figcaption {
    position:absolute;
    top: -65px;
    background: rgba(0, 0, 0, 0.7);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    zoom: 1;
    width: 195px;
    height: 65px;
}

for some reason the Background is not appearing on IE 8. Rest of the browsers are working fine.

Problem courtesy of: user3610227

Solution

Initial Considerations:

http://css-tricks.com/snippets/css/cross-browser-opacity/

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

References:

Opacity CSS not working in IE8

Internet Explorer Dev Center

http://social.msdn.microsoft.com/Forums/ie/en-US/616b7ee2-fdd3-48d9-9485-28608517afc1/ie-8-progiddximagetransformmicrosoftalphaopacity90-with-rollovers-does-not-work?forum=iewebdevelopment

http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85).aspx

Alternative Considerations:

You might want to try and experiment with the online ColorZilla app. I've found it to be incredibly helpful when trying to deal with browser versions and compatibility issues regarding not just gradients but backgrounds and their sometimes hard to remember properties.

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-8 */

All Code Taken From ColorZilla: http://www.colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.7+100;Custom

Solution courtesy of: Frankie Loscavio

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

IE background with filter opacity

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×