interview

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

Ask Question
Abhishek Srivasatava

Abhishek Srivasatava

Follow

Can you answer this question?

Answer

1 Answers

Abhishek Srivasatava

Abhishek Srivasatava

14-Oct-2016

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>

Liked By