Cross Browser Transparency
There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Landing Pages & Email
Icons, Vectors & More
Shopify, Tumblr & More
Mozilla browsers can display transparency, using an effect specified through
-moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).
Internet Explorer uses a filter property to allow you to show transparency. It takes the form
filter: alpha(opacity=50); where the opacity value is between 0 and 100.
Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property
opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.
The way to get this working in all browsers is simply a matter of using all three rules at the same time:
The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.
Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the
opacity: 0.5; rule will suffice.