opacity - HTML CSS CSS Property

HTML CSS examples for CSS Property:opacity

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. opacity

Description

The opacity CSS property sets the transparency of an element.

The following table summarizes the opacity Property.

Item Value
Default value: 1 (opaque)
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


opacity:      alphavalue | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
alphavalue A number in the range 0 (fully transparent) to 1 (fully opaque).
initialSets this property to its default value.
inherittake the value of its parent element opacity property.

The example below shows the opacity property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 opacity property</title>
  <style type="text/css">
    img {<!--from   w w  w. java2  s. c om-->
        opacity: 0.25;
    }
    p {
        opacity: 0.5;
        filter: Alpha(opacity=50);
    }
</style>
 </head>
 <body>
  <div>
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Sky">
  </div>
  <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>
 </body>
</html>

Related Tutorials