Educational

opacity Property

Written by

Saim Khalid

in

The opacity Property

CSS opacity property controls the transparency of an element. It determines how much of a hidden element’s content is visible. The property can be used on various elements, whether they contain text, images, or serve as backgrounds.

CSS opacity Example

Here is an example of the opacity property. You can change the slider and see the change in opacity and the value of opacity.

Slide this slider to see the change in opacity.

Adjust Opacity:

0.5

Syntax

The syntax for the CSS opacity property is as follows:

opacity: number | percentage | initial | inherit;

Property Values

ValueDescription
numberIt specifies the opacity level of elements using numeric values between 0 (fully transparent) and 1 (Visible).
percentageIt specifies the opacity level of elements using percent values between 0% (fully transparent) and 100% (Visible).
initialIt sets the property to its default value.
inheritIt inherits the property from the parent element.

CSS opacity Property with Numeric Values

To set the transparency level of an element, we can specify numeric values between 0 and 1 including them with the opacity property.

Example

In this example, we have used numeric values to specify the opacity level of div elements.

<!DOCTYPE html><html><head><style>

  .props {
     height: 50px;
     padding: 20px;
     text-align: center;
     font-weight: bold;
     font-size: 20px;
     background-color: lightgreen;
  }


  .first {
     opacity: 0.3;
  }


  .second {
     opacity: 0.6;
  }


  .third {
     opacity: 1;
  }
   </style></head><body><h2>

  CSS opacity property
   </h2><h4>

  opacity: 0.3
   </h4><div class="props first">

  This div has opacity: 0.3
   </div><h4>

  opacity: 0.6
   </h4><div class="props second">

  This div has opacity: 0.6
   </div><h4>

  opacity: 1
   </h4><div class="props third">

  This div has opacity: 1
   </div></body></html>

CSS opacity Property with Percentage Values

To set the transparency level of an element, we can specify percentage values between 0% and 100% including them with the opacity property.

Example

In this example, we have used the percent value to specify the opacity level of div elements.

<!DOCTYPE html><html><head><style>

  .props {
     height: 50px;
     padding: 20px;
     text-align: center;
     font-weight: bold;
     font-size: 20px;
     background-color: lightgreen;
  }


  .first {
     opacity: 30%;
  }


  .second {
     opacity: 60%;
  }


  .third {
     opacity: 100%;
  }
   </style></head><body><h2>

  CSS opacity property
   </h2><h4>

  opacity: 30%
   </h4><div class="props first">

  This div has opacity: 30%
   </div><h4>

  opacity: 60%
   </h4><div class="props second">

  This div has opacity: 60%
   </div><h4>

  opacity: 100%
   </h4><div class="props third">

  This div has opacity: 100%
   </div></body></html>

CSS opacity for Images

You can use the opacity property to set the transparency level of images. Setting the transparency level of an image can help in creating an overlay.

Example

In this example, we have used the opacity property to set the transparency level of the logo at different levels.

<!DOCTYPE html><html><head><style>

  .props {
     width: 300px;
     height: 150px;
  }


  .first-img {
     opacity: 0.1;
  }


  .second-img {
     opacity: 50%;
  }


  .third-img {
     opacity: 1;
  }
   </style></head><body><h2>

  CSS opacity property
   </h2><h4>

  opacity: 0.1
   </h4><img class="first-img props" src="/css/images/logo.png" 
   alt="Tutorials point"><h4>

  opacity: 50%
   </h4><img class="second-img props" src="/css/images/logo.png" 
   alt="Tutorials point"><h4>

  opacity: 1
   </h4><img class="third-img props" src="/css/images/logo.png" 
   alt="Tutorials point"></body></html>

CSS opacity Property with RGBA Color Values

The opacity property applies transparency to an element and its child elements. To avoid this and still achieve transparency, we can use the rgba() values. These values specify colors along with opacity only to the desired element.

Example

In this example, we have used the opacity and rgba() functions to highlight the difference between these two.

<!DOCTYPE html><html><head><style>

  div {
     width: 200px;
     padding: 10px;
     text-align: center;
  }


  .first-color {
     background-color: rgba(77, 77, 255);
  }


  .decimal-opacity1 {
     opacity: 0.1;
  }


  .decimal-opacity2 {
     opacity: 0.3;
  }


  .decimal-opacity3 {
     opacity: 0.6;
  }


  .decimal-opacity4 {
     opacity: 0.9;
  }


  .rgba-opacity1 {
     background-color: rgba(77, 77, 255, 0.1);
  }


  .rgba-opacity2 {
     background-color: rgba(77, 77, 255, 0.3);
  }


  .rgba-opacity3 {
     background-color: rgba(77, 77, 255, 0.6);
  }


  .rgba-opacity4 {
     background-color: rgba(77, 77, 255, 0.9);
  }


  .container {
     font-weight: bolder;
     margin-left: 50px;
     float: left;
  }
   </style></head><body><h2>

  CSS opacity property
   </h2><p>

  It is clear from the 
   <strong>

  transparent element
   </strong> 

  portion below, that the opacity property is 
  applied to all other elements present within 
  the element that uses opacity property. 
   </p><p>

  To prevent this, we can make use of the 
   <strong>

  rgba values
   </strong> 

  which define the color along with opacity. The 
  opacity is applied only to the particular element 
  and not to the elements present within it.
   </p><div class="container"><h4>

     Transparent element
  &lt;/h4&gt;&lt;div class=" first-color decimal-opacity1"&gt;
     CSS Opacity 0.1
  &lt;/div&gt;&lt;div class="first-color decimal-opacity2"&gt;
     CSS Opacity 0.3
  &lt;/div&gt;&lt;div class="first-color decimal-opacity3"&gt;
     CSS Opacity 0.6
  &lt;/div&gt;&lt;div class="first-color decimal-opacity4"&gt;
     CSS Opacity 0.9
  &lt;/div&gt;&lt;/div&gt;&lt;div class="container"&gt;&lt;h4&gt;
     With RGBA color values
  &lt;/h4&gt;&lt;div class="rgba-opacity1"&gt;
     CSS Opacity 10%
  &lt;/div&gt;&lt;div class="rgba-opacity2"&gt;
     CSS Opacity 30%
  &lt;/div&gt;&lt;div class="rgba-opacity3"&gt;
     CSS Opacity 60%
  &lt;/div&gt;&lt;div class="rgba-opacity4"&gt;
     CSS Opacity 90%
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts