How to apply CSS opacity in IE7 and IE8 browsers


Apply opacity in IE7: The opacity level of the HTML element is defined by using the CSS opacity property. We can set opacity like 0.5, which the element opacity as 50%. This works fine with all modern browsers, but not in IE7. Yes IE7 is a very outdated browser, but still, some user used their application on IE7. So here in this article, we learn how to set opacity in MS IE7. 

Recently I encounter one issue, where I have to set the opacity of an input textbox and a div tag. So I tried by setting CSS property opacity: 0.5, and it works for all modern browsers, but not in the MS IE7 browser. After some research, I figured out that the direct opacity property not working in the old browser .ie IE7.

To make it work in IE7 we have to write extra css, which as written below:

.contentCard {
  filter: alpha(opacity=50);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /*For IE8 */
  zoom: 1;  /* for IE7 */
  opacity: 0.5;  /* Default syntax for modern browser */

Here we use the filter and -ms-filter property, which defines the visual effect of the element.  By setting opacity=50 we make our div 50% opacity in MS IE7.

Conclusion: Using the filter property we can set the opacity of the HTML element in IE7.

Other Reference:

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *