totn CSS

CSS: opacity property

This CSS tutorial explains how to use the CSS property called opacity with syntax and examples.

Description

The CSS opacity property defines the transparency of an element.

Syntax

The syntax for the opacity CSS property is:

opacity: value;

Parameters or Arguments

value

The level of transparency of an element. It can be one of the following:

Value Description
number A value between 1.0 and 0.0.
div { opacity: 0.5; }
inherit Indicates that the element will inherit the opacity from its parent element
div { opacity: inherit; }

Note

  • If the opacity property is expressed as a number, it can be between 1.0 and 0.0.
    • A value of 1.0 means that the element is fully opaque (and you can't see behind the element).
    • A value of 0.0 means that the element is fully transparent (ie: invisible).

Browser Compatibility

The CSS opacity property has basic support with the following browsers:

  • Chrome 1+
  • Android 1+
  • Firefox 1+ (Gecko 1.7+)
  • Firefox Mobile 1.0+ (Gecko 1.7+)
  • Internet Explorer 9+ (IE 9+)
  • IE Phone 9+
  • Opera 9+
  • Opera Mobile 9+
  • Safari 1.2 (WebKit)
  • Safari Mobile 3.2

Example

We will discuss the opacity property below, exploring examples of how to use this property in CSS.

Opaque

Let's look at an example where we set the opacity to a value of 1 which makes an element opaque.

The CSS would look like this:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 1; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS opacity example, we have set the opacity to 1 on the <p> tag, which means that the <p> element is completely solid with no degree of transparency.

Translucent

Now, let's take our same example and apply a level of transparency to the <p> tag to make it translucent.

The CSS would look like this:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 0.5; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS opacity example, we have set the opacity property on the <p> tag to 0.5, which makes the <p> element translucent. This results in the background behind the <p> tag partially showing through.

As you can see, the blue border and lightblue background from the <p> tag start to appear green as the yellow background from the <div> tag begins to show through.

Fully Transparent

Finally, let's take our example and make our element fully transparent or invisible.

The CSS would look like this:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 0; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS opacity example, we have now set the opacity property to 0 for the <p> tag, which makes the <p> element fully transparent or invisible.

Share on: