IE background with filter opacity

Question

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.

Are you using a shim for HTML5 tags? – Teemu May 22 '14 at 05:59 — Teemu, May 22 '14 at 05:59

score 0 · Accepted Answer · edited May 23 '17 at 11:53

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

IE background with filter opacity

1 Answers1