By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Opacity Property

Reference showing how to use the CSS Opacity Property. List of allowed values, and useful examples.

Created: 2011-12-28 02:32

The CSS Opacity Property, is used to control the transparency of elements.

A value of 1 means that the element is fully visible, to set the elements transparency to half, use a value of 0.5 instead.

The Opacity property will effect all children of the element that its applied to. If you only want to control the transparency of the elements background-color, then use RGBA instead, which allows you to control the alpha channel.

CSS Opacity Example

Example Text

The code used for the above example can be viewed below.

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: rgba(0,0,255,0.5);width: 150px;height: 150px;top: 25px;left: 25px;">
   <span style="font-size:1.5em;font-weight:bold;color:#000;">Example Text</span>

Brugbart Vision!

Inherited? NO!