Latest web development tutorials
 

Style opacity Property

< Style Object

Example

Make a DIV element transparent:

document.getElementById("myDIV").style.opacity = "0.5";
Try it Yourself »

Definition and Usage

The opacity property sets or returns the opacity level of an element.

The opacity-level of an element describes the transparency-level, where 1 is not transperant at all, 0.5 is 50% see-through, and 0 is completely transparent.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The opacity property is supported in all major browsers.

Note: IE8 and earlier supports an alternative, the filter property.


Syntax

Return the opacity property:

object.style.opacity

Set the opacity property:

object.style.opacity="number|initial|inherit"

Property Values

Value Description
number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: 1
Return Value: A String, representing the opacity-level of an element
CSS Version CSS3

Related Pages

CSS reference: opacity property


< Style Object