How to Add Alpha Filter to Any HTML Element and Keep the Other Filters in Ie

How to add alpha filter to any HTML element and keep the other filters in IE?

Unfortunately, it seems to me you can only add new elements through the style.filter property, with filters you can only manipulate already existing ones.

filter is a collection object, you can find the docs here: filters Collection. It gives you a nice and easy way to play with your existing filters, you can turn them on and off (enabled), etc.

For example, you can use

obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity=20;

or (if alpha was you first filter declaration)

obj.filters.item(0).opacity=20;

CLASSES

Most of the time you're better off storing your filter declarations under certain classes in your CSS, and only using JS to assign the right classes instead of manipulating style values directly.

How to add filter: alpha using javascript?

you need to use CSS.

document.getElementById("5").setAttribute("style","opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30)");

It works on FireFox, Chrome and IE.

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

Internet Explorer filters input transparent

What about the following.

<input type="text" class="transparent"/>

<style>
input.transparent{
    background-color: transparent;
    border: 0 none; 
}
</style>

Also the IE version makes quite a difference.

How to decrease CSS opacity

With IE variation

var style = document.getElementById(...).style;
if(browserIsIE) {
  var regExpResult = /alpha\(opacity\s*=\s*(\d*)\s*\)/.exec(style.filter);
  var opacity;
  if(regExpResult && regExpResult.constructor == Array && regExpResult[1] && opacity = parseInt(regExpResult[1])) {
    style.filter = "alpha(opacity = " + (opacity - 10) + ")";
  } else {
    style.filter = "alpha(opacity = 90)"; 
  }
} else {
  style.opacity = style.opacity=='' ? 0.9 : parseFloat(style.opacity)-0.1;
}

Opacity of div's background without affecting contained element in IE 8?

The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.

The CSS is fairly simple:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the opacity value.

See this page for more info: http://css-tricks.com/rgba-browser-support/

The down-side, is that this doesn't work in IE8 or lower. The page I linked above also lists a few other browsers it doesn't work in, but they're all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.

The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.

To use CSS3Pie for backgrounds, you need to add a specific -pie-background declaration to your CSS, as well as the PIE behavior style, so your stylesheet would end up looking like this:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

[EDIT]

For what it's worth, as others have mentioned, you can use IE's filter style, with the gradient keyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE's filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that's not relevant to this discussion)

rgba background with IE filter alternative: IE9 renders both!

I’ve come up with a hacky workaround that I thought I'd share.

IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn’t exist on an element we can get IE9 to disable it's filter gradient:

div {
    width: 200px;
    height: 200px;

    /* For FF, Chome, Opera, IE9+ */
    background: rgba(0,0,255,0.5);

    /* For IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

div:not([dummy]) {
    /* IE9 only */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.

Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.

Internet Explorer's problem with css :after pseudo element when using opacity filter

An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.

---

Related Topics