CSS opacity Property

Description

The opacity property can be thought of conceptually as a post processing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

Initial value: 1
Applies to: All elements
Inherited: No
Media: Visual
Computed value: The same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.opacity

Syntax

opacity: <alphavalue> | inherit

Values

<alphavalue>A floating-point value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range.
inherit

Example

HTML

<div class="opacity"> Example of the css opacity property.</div>

CSS

body {
   background: url(images/tick.png);
}
.opacity {
   background: #ccc;
   padding: 30px;
   opacity: 0.7;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

9	12	1	1	9	2

Tablets / Mobile

1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 16th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu