CSS opacity Property

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

CSS opacity Property

❮ Previous
Complete CSS Reference
Next ❯

Example

Set the opacity level for a <div> element:

div

opacity: 0.5;

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The opacity property sets the opacity level for an element.

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

opacity 0.2

opacity 0.5

opacity 1
(default)

Note: When using the opacity property to add transparency to
the background of an element, all of its child elements become transparent as
well. This can make the text inside a fully transparent element hard to read. If
you do not want to apply opacity to child elements, use RGBA color values
instead (See "More Examples" below).

Default value:	1
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.opacity="0.5" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
opacity	4.0	9.0	2.0	3.1	9.0

Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

CSS Syntax

opacity: number|initial|inherit;

Property Values

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

More Examples

Example

The opacity property adds transparency to the background of an element, and
to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first
    opacity: 0.1;

div.second

opacity: 0.3;

div.third
    opacity: 0.6;

Try it Yourself »

Example

To not apply opacity to child elements (like in the example above) use RGBA color values
instead.
The following example sets the opacity for the background color, but not for the text:

div.first
    background: rgba(76, 175, 80, 0.1);

div.second
    background: rgba(76, 175, 80, 0.3);

div.third
    background: rgba(76, 175, 80,
0.6);

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

function myFunction(x)
// Return the text of the selected option
    var opacity = x.options[x.selectedIndex].text;
    var el = document.getElementById("p1");
    if (el.style.opacity !== undefined)
        el.style.opacity = opacity;
    else
        alert("Your browser doesn't support this example!");

Try it Yourself »

CSS Tutorial: CSS Opacity / Transparency

CSS Tutorial: CSS RGBA Colors

HTML DOM Reference: opacity property

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

wefcdr