Thursday, December 2, 2010

Opacity in CSS

Today we learn of opacity in CSS! I made an example here

Information opacity in CSS:
property has a value of opacity of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below the item shows through. 1.0 is 100% opaque - nothing below element will show through.
So, to set an element of transparency of 50%, you may write: opacity: 0.5;

Neither IE 6 or 7 supports CSS 3 opacity property. But you're out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (fully transparent) to 100 (fully opaque). So, for your transparency in IE, you must multiply your opacity by 100 and add an alpha filter to your style:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

Open notepad type below code
<title>Opacity in CSS</title>
<style type="text/css">
background-image: url("");
background-repeat: no-repeat;
font-size: 18px;
width: 200px;
opacity: 0.70;
height: 500px;
margin-left: 5em;
background-color: black;

p { padding-top: 20px;
<div><p>Learn how to make <a href="" style="color:#FFFFFF;">opacity in css</a>. this example shows opacity in css in html.</p>

In this example, I create an html page with CSS easy. I put a background image and a div with the background color black. So I make the div opacity to 70%!

This results in:
Opacity in CSS