Ask a question »

Create a transparent DIV

May 2016

A webmaster can make use of CSS image opacity property to create a transparent div. With CSS, making a transparent div is easy. There are several CSS techniques that can be used to make a transparent div. A transparent div can be created with content or without content. When a div is made transparent with content, images and text are also made transparent along with the div. In case the div is made transparent without content, the div alone will be transparent. It is simple to create a transparent div with CSS but the browser versions that do not support the opacity property will not show the effect.

The transparent DIV in CSS

To create a transparent DIV, you can make use of the CSS techniques listed below:

Create a transparent DIV (with the content)

The div itself will be transparent, but the same applies for all other content such as images or text.

<div style="filter:alpha(opacity=50); opacity:0.5;">........</div> 

The opacity property is taken into account in firefox 3 +, Chrome 2 +, Safari 4 and Opera 10.
The filter:alpha(opacity=50) enables Internet Explorer 8 and Opera 9.x to make content transparent.

Create transparent DIV (without the content)

Use CSS-property: "rgba"

To add color in CSS, use the property rgb (). Soon the function rgba() will be available . The "a" is for the transparency:
<div style="background-color: rgba(255, 0, 0, 0.5)">.........</div>

Here, the color red will be transparent.
This function is not recognized by Internet Explorer or Opera 9.x (works with Opera 10).

For unlimited offline reading, you can download this article for free in PDF format:

See also

In the same category

Crear una DIV con trasparencia
By Carlos-vialfa on September 18, 2009
Créer une DIV avec transparence
By Jeff on August 25, 2009
Criar um DIV com transparência
By pintuda on February 26, 2011
Published by jad05. - Latest update by deri58
This document entitled « Create a transparent DIV » from CCM ( is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.