CSS Opacity
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Opacity

Quick Copy Boxes

The word opaque means not able to be seen through. The opposite of opaque is transparent. Things that are transparent can be seen through. In CSS this property is called opacity.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Opacity is measured on a scale of 0 to 1. An element with an opacity value of 0 would be completely transparent. On the contrary, an element with an opacity value of 1 would be completely opaque.



.trans {
   opacity: .5;

trans - This is our CSS class name.
opacity - It is .5


<img class = 'trans' src = 'logo.png'>

Here is the an the Coding Commanders Logo at .5 opacity:

Color Selector



Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.