Opacity Property in CSS

This opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

Value	used for
normal	The value of the opacity property ranges between 0 and 1
overlay	This Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another
darken	The opacity of the black gradient can be changed to control the amount of darkening.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Opacity</title>
  <style>
 div{
  width: 800px;
  border: 1px solid #333;
  padding: 10px;
 }
 img{
  opacity:0.3;
  /* filter: alpha(opacity=50); */
 }
  </style>
</head>
<body>
  <h2> Opacity </h2>
  <div>
      <img src="bg.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ea dicta vel ab facilis debitis quos expedita fuga voluptates fugit. Blanditiis, minima nostrum, doloribus corporis culpa labore dolorum eveniet accusamus commodi in suscipit vero odio optio atque ipsa! Dicta, corporis nisi optio delectus dolor reiciendis recusandae ut natus accusantium, sequi suscipit molestias facere necessitatibus, cupiditate mollitia sit excepturi asperiores. Animi in, voluptatem eos autem pariatur sint voluptates sed quisquam odit ipsam rem magni facilis quod saepe totam molestias at quos expedita dignissimos ex, aspernatur quam exercitationem voluptatibus. Aperiam ea, delectus beatae odit corporis dignissimos. Ad sapiente aliquam provident ducimus ullam?</p>
  </div>
</body>
</html>

<!--
normal
screen
overlay
darken
hard-light
soft-light
multiply
color-burn
difference
exclusion
hue
color
saturation
luminosity
-->

Output

Opacity Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects