Opacity

You've probably visited a website that had a background image that was slightly transparent. If you were wondering how this was done, it's quite simple actually. The opacity property helps us achieve this effect. Let's see how we can use it in practice.

Syntax

The opacity property is used to define the opacity of an element on the scale from 0.0 to 1. The lower the value, the more transparent the element will be.

We can use any number between 0.0 and 1.

/* Opaque - Default value */
element {
  opacity: 1;
}

/* Semitransparent */
element {
  opacity: 0.5;
}

/* Transparent */
element {
  opacity: 0;
}

Examples of property usage

We will use an image as an example, but the opacity property can be used on any element.

img {
  opacity: 1;
}

Here our image didn't change because 1 is the default value.
Now, if we use a smaller value, like 0.5, our image will become much more transparent.

img {
  opacity: 0.5;
}

Now let's use a value of 0.1 to make our image almost transparent. After all, if we use a value of 0 our image would be totally transparent and it would not be possible to see it.

Conclusion

Now you know how to make that beautiful transparent background on a website. Remember, that you can apply the opacity property to any element, not only images. However, be careful, do not put too much opacity on elements, especially on text, or it would be difficult to read! Now, let's put all this knowledge into practice and turn to some tasks!