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

Posted on    October-14-2016 1:05 AM

 1 Answer(s)
  35  View(s)
Rate this:

Abhishek Srivasatava
Abhishek Srivasatava

Total Post:56

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.) 

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?


Writing some text in inside transparent box

<!DOCTYPE html>
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;
<div class="backgnd">
  <div class="boxtrns">
    <p>Text of transparaent block</p>

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

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

Follow MindStick