Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to create a transparent image with CSS?

    @poonam.kothiyal
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 808
    Comment on it 
    <!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div.bg
  {
  width:500px; 
  background:#000;
  border:2px solid #00ff00;
  }
div.transparent-box
  {
  width:400px;
  margin:40px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.5;
  filter:alpha(opacity=50); 
  } 
div.transparent-box p
  {
  margin:20px;
  font-weight:bold;
  text-align: justify;
  }
</style>

<div class="bg">
<div class="transparent-box">
<p> 
 CSS property specifies the transparency of an element.
 CSS property specifies the transparency of an element.
 CSS property specifies the transparency of an element.
 CSS property specifies the transparency of an element.
 CSS property specifies the transparency of an element.
</p>
</div>
</div>

    alt text



    The CSS3 property for transparency is opacity. IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A setting of opacity: 1 would make the element completely opaque (i.e. 0% transparent), whereas opacity: 0 would make the element completely transparent (i.e. 100% transparent).A lower value makes the element more transparent.

    opacity: x;
    syntax for CSS opacity in all current browsers.The x can take a value from 0.0-1.0.

    filter:alpha(opacity=x);
    Internet Explorer 8 and earlier version supports a Microsoft-only property "alpha filter" to control the transparency.The x can take a value from 0-100.

    opacity: 0.5; /* Opacity for Modern Browsers /
    filter: alpha(opacity=50); /     Opacity for IE8 and lower /
    zoom: 1; /     Fix for IE7 */
    Combining the both steps above you will get the opacity for all browsers.

    HTML5 css
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: