Transparency with CSS and GWT

It's simple to make transparent elements in HTML. Just use CSS. Even IE6 supports it.

Say we want an image to have 25% transparency...

The standard CSS property is

opacity: 0.25;

but IE and some older browsers have different ways of specifying it, so you probably want to use them all to cover your bases

opacity: 0.25; //css standard

filter:alpha(opacity=25); //ie (note that 50% is 25 here, not .25)

-moz-opacity:0.25; //very old mozilla/netscape browsers

-khtml-opacity: 0.25; //very old safari browsers

Here is what it might look like in GWT

public void setOpacity(Element element, double opacity) {

if (opacity > .995) {

element.getStyle().setProperty("opacity", "");

element.getStyle().setProperty("filter", "");

element.getStyle().setProperty("-moz-opacity", "");

element.getStyle().setProperty("-khtml-opacity", "");

} else {

String s = Integer.toString((int) Math.round(opacity * 100));

String sDecimal = (s.length() == 1 ? ".0" : ".") + s;

element.getStyle().setProperty("opacity", sDecimal);

element.getStyle().setProperty("filter", "alpha(opacity=" + s + ")");

element.getStyle().setProperty("-moz-opacity", sDecimal);

element.getStyle().setProperty("-khtml-opacity", sDecimal);

}

}

primary source: http://css-tricks.com/css-transparency-settings-for-all-broswers/