Home > DeveloperSection > Interviews > What is Opacity in CSS (Cascading Style Sheet)?

Posted on    October-14-2016 1:05 AM

 CSS-CSS3 CSS 
Ratings:
 1 Answer(s)
  87  View(s)
Rate this:

Abhishek Srivasatava
Abhishek Srivasatava

Total Post:70

Points:350
Posted on    October-14-2016 1:05 AM

It can be define as the transparency of any image, block etc.

For defining opacity in CSS we need to remember keyword OPACITY ( Filter it is used in internet explorer.) 

Img 
{
Opacity: 0.5
Filter: alpha (opacity =50)
}

Opacity value can be in between 0-1.

It can be use for hover case.

How it can be use in the CSS programming?

Img:hover
{
Opacity:1.0
}

Writing some text in inside transparent box

<!DOCTYPE html>
<html>
<head>
<style>
div.backgnd {
  background: red;
  border: 2px solid black;
}
div.boxtrns {
  margin: 30px;
  background-color: blue;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
  margin: 20px;
  font-weight: bold;
  color: green;
}
</style>
</head>
<body>
<div class="backgnd">
  <div class="boxtrns">
    <p>Text of transparaent block</p>
  </div>
</div>
</body>
</html>


Modified On Oct-14-2016 01:09:22 AM

Don't want to miss updates? Please click the below button!

Follow MindStick