CSS Opacity and Transparency

Both CSS properties opacity and trasparency are used to set the transparency of an HTML element. Defining opacity using CSS makes an element transparent while also maintaining the same transparency to its child elements which can reduce readability of a content while setting transparency the other way using RGBA value makes the defined element transparent while child elements are not affected by it.

CSS Opacity

The default opacity value of an HTML element is 1 which can be changed with value anywhere between 0.0 to 1.0. Lowering the opacity value makes the element more transparent.

<img src="web-design.jpg" class="opacity">
<style>
.opacity{
  opacity: 0.5;
}
</style>  

IE8 and earlier versions of browsers use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Transparency on Hover

The opacity property is often used together with the :hover selector to change the opacity of an element on mouse-over.

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Transparent Box

Using CSS property opacity to add transparency to the background of an element forces all of its child elements inherit the same transparency. This can make the text inside transparent element hard to read as shown below.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In the example above, the transparency of the parent element is inherited by the child elements too. Here's the CSS.

.transparent{
  background: #f00;
  color: #fff;
  padding: 15px;
  opacity: 0.2;
}

Transparency using RGBA

Alternatively, you can use the RGBA color values to set the transparency of an HTML element which will make the specified element transparent and the child elements do not get affected.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In both examples with and without rgba color values for transparency, the text is readable but the image transaparency in the former style is clearly seen to be affected by the transparency set to its parent eleemnt while in the latter example there is no effect of transparency set on its parent element.

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="child">
    <img src="web-design.jpg" width="100%">
  </div>
</div>

<style>
.parent{
  width: 100%;
  display: table;
  background: rgba(0,0,0,0.2);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}
.child{
  width: 48%;
  float: left;
}
.child:last-child{
  float: right;
} 
</style>

0 Like 0 Dislike 0 Comment Share Tweet