How to Maintain Png Alpha Transparency When Using "-Ms-Filter" Property

How to maintain PNG alpha transparency when using -ms-filter property

UPDATE: AlphaImageLoader filter applied directly to the img may override the Alpha filter. As for removing a filter have you tried filter:none; ?

Yes, programmically target IE6 and below with conditional comments.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Also scripts like IE7-js will handle PNG transparency for you without cluttering up your CSS with non-standard code.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Rotating a div with png background using the filter:matrix method in IE turns transparency into black on background

I did not try it myself yet, but I think one of the following may help:

• http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/
• http://www.dillerdesign.com/experiment/DD_belatedPNG/
• How to maintain PNG alpha transparency when using "-ms-filter" property

Cross browser rgba transparent background while keeping content (text & images) non-transparent

See this blog post for a cross browser method:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Web browser support

RGBa support is available in: Firefox
3+ Safari 2+ Opera 10

Filters in Internet Explorer are
available since Internet Explorer 5.5.

This means that this will work for
virtually everyone!

See here for an easy way to generate the colors for the IE filters.

Doing this should eliminate the need to use "base64 png images with 'data URI scheme'".

---

If you really, really want to generate client side .png images (I can't see the need for it here):

Generate client-side PNG files using JavaScript. Cool idea, really:

It was once again one of those nights
where I hacked like on drugs with no
end in sight. Sure, 5 years ago you
had loved me with such a project, but
in times of HTML5 with the canvas
element it is hard to impress you. So
take it as proof of creating client
side images without canvas, SVG, or
server side rendering and AJAX
processing.

But how is this possible? Well, I've
implemented a client-side JavaScript
library like libpng which creates a
PNG data stream. The resulting binary
data can be appended to the data
URI-scheme using Base64 encoding.

Is it more efficient to make a half-transparent PNG, or set opacity/alpha-filter on a non-transparent PNG?

Check the 5th answer of linked question.

Opacity CSS not working in IE8

No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."

see: http://www.satzansatz.de/cssd/onhavinglayout.html

Change alpha for an image hover in CSS2 standard?

If the image is a PNG, you can include alpha directly in the image. Of course this would require the PNG Fix script for IE6.

Otherwise, you can use CSS to set the transparency.

Edit: Updated to only work on hover, note that this won't work in IE6.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

JavaScript: Invert color on all elements of a page

My solution seems to work only for Chrome right now, but it inverts everything (including images and iframes) as seen here:

Also it does not make use of external libraries and is very simple: adding a -webkit-filter: invert(100%) to the html-selector.

javascript: (
function () { 
// the css we are going to inject
var css = 'html {-webkit-filter: invert(100%);' +
    '-moz-filter: invert(100%);' + 
    '-o-filter: invert(100%);' + 
    '-ms-filter: invert(100%); }',

head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

// a hack, so you can "invert back" clicking the bookmarklet again
if (!window.counter) { window.counter = 1;} else  { window.counter ++;
if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}
 };

style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

//injecting the css to the head
head.appendChild(style);
}());

Here's the fiddle: http://jsfiddle.net/nikita_turing/jVKw6/3/ with the bookmarklet included. If someone has an idea of how to make it work for Firefox (SVG-Filters?), go ahead!

---

Related Topics