CSS cross browser opacity example

• Tweet

• Tweet

Hello,

While I am working on a project one of the requirement is that make the site look and feel as much compatible with Internet Explorer 7.

IE7 Yeah! Well nothing against the browser because its Free and still lot of people use it. I myself am not fan of IE7 but IE9 and 10 are on right track I guess. I am Chrome lover.

Anyway this post is not about the browser comparison but rather I just wanted to highlight how we can make the element opacity to work in majority of the browsers.

Alright so lets check it out.

For the example I worked on below is the mark up used

The Markup

<div class="outer">
      <img src="http://jaspreetchahal.org/examples/img/demopill.png">
     <d iv class="inner with-opacity">
           Copyright &copy; jaspreetchahal.org 
     </div>
 </div>

I wanted to display an overlay on my image with text “Copyright © jaspreetchahal.org“

lets check the CSS for the above

.outer {
  position: relative;
  border:5px #000 solid;
  border-radius: 10px;
  width:400px;
  text-align: center;
  color:#fff;
}
.inner {
  position: absolute;
  left:0;
  right:0;
  top: 40%;
  font-size: 22px;
  background: #fff;
  color: #000;
 
}
.with-opacity {
 
  /* all modern browsers */
  opacity: 0.3;
 
  /*if above property is supported then all the below will be skipped*/
  /* Internet explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 
  /* for internet explorer 5 to 7 */
  filter: alpha(opacity=30);
 
  /* Mozilla */
  -moz-opacity: 0.3;
 
  /* Safari 1.x */
  -khtml-opacity: 0.3;
 
}

All the major browsers now support property opacity but this was not the case some time back. But still if you are looking to make your website to work on many old browsers that some people still use then making use of browser specific CSS properties is the right thing to do as we did with the opacity property above

Lets check the result of the above styles

Demo

Demo can be viewed by click the link below.

http://jaspreetchahal.org/examples/css-examples/cross-browser-element-opacity.html

I hope that this will help you in one way or another

Cheers

Advertisement