CSS Image Transparency (Opacity )

CSS Image Opacity (Transparency)

In CSS, there is no property such as transperancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparency is opacity and it is a part of the W3C CSS3 recommendation.

div
{
  opacity: 0.6;
}

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

Creating a Transparent Image

You can create Transparent Background Images by using the CSS property opacity.

The first image is the opacity level 1.0 and second image we set opacity level 0.3.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      opacity: 0.3;
      filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */
    }
  </style>
</head>
<body>
  <img src="img/duck.png" width="192" height="191" alt="transparent image">
</body>
</html>

All modern web browsers have implemented a very basic CSS opacity property so there is no need of browser specific code. But IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 to 100. The value 50 means 50% see-through.

How to create a transparent color Div

You can create a tranperant background Div using the CSS Opacity property.

The first div has transperancy level of 1. and send div level 0.5.

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .sq{
      width:100px;
      height:100px;
      background:orange;
      border: 1px solid black;
      float:left;
      align:center;
      opacity:1.0;
    }
    .sq1{
      width:100px;
      height:100px;
      background:orange;
      border: 1px solid black;
      float:left;
      align:center;
      opacity:0.5;
    }
  </style>
</head>
<body>
  <div class="sq">
    opacity 1.0
  </div>
  <div class="sq1" >
    opacity 0.5
  </div>
</body>
</html>

Transparent Border

In CSS you can make your image border transparent.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .duck
    {
      width:190px;
      height:190px;
      background: url(img/duck.png) no-repeat;
      border:5px solid #000000;
    }
    .trBorder {
      height: 120px;
      width: 120px;
      margin: 30px;
      border: 10px solid rgba(255,255,255,.5);
    }
  </style>
</head>
<body>
  <div class="duck">
    <div class="trBorder">
    </div>
  </div>
</body>
</html>

transparent Box

The following program shows a transparent box over the image and you can write your text in the Transparent Box.

Write your text here

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .duck
    {
      width:190px;
      height:190px;
      background: url(img/duck.png) no-repeat;
      border:5px solid #000000;
      font-size: 30px;
      font-weight: 900;
      color:blue;
    }
    .trBorder {
      height: 150px;
      width: 150px;
      margin: 20px;
      background: rgba(255,255,255,.5);
    }
  </style>
</head>
<body>
  <div class="duck">
    <div class="trBorder" align=center>
    Write your text here
    </div>
  </div>
</body>
</html>

transparent Text

The following program using a tricky way to appear text as transparent.

Duck

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .duck
    {
      width:192px;
      height:191px;
      background: url(img/duck.png) no-repeat;
      border:5px solid #000000;
      font-size: 70px;
      color:rgba(255,255,255,.5);
      font-weight: 900;
    }
    .trBorder {
      height: 120px;
      width: 120px;
      margin: 30px;
      border: 10px solid rgba(255,255,255,.5);
    }
  </style>
</head>
<body>
  <div class="duck">
  <br>
  Duck
  </div>
</body>
</html>