Opacity
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.
Examples
<img src="../assets/img-min/img1.jpg" class="opacity-50" alt="Example" />
<img src="../assets/img-min/img1.jpg" class="opacity-60" alt="Example" />
<img src="../assets/img-min/img1.jpg" class="opacity-70" alt="Example" />
<img src="../assets/img-min/img1.jpg" class="opacity-80" alt="Example" />
<img src="../assets/img-min/img1.jpg" class="opacity-90" alt="Example" />
<img src="../assets/img-min/img1.jpg" class="opacity-100" alt="Example" />
Notation
The classes are named using the format {property}-{size}.
Where property is one of:
opacity- for classes that setopacity
Where size is one of:
0- (by default) for classes that set theopacityto0 (transparent)10- (by default) for classes that set theopacityto.120- (by default) for classes that set theopacityto.230- (by default) for classes that set theopacityto.340- (by default) for classes that set theopacityto.450- (by default) for classes that set theopacityto.560- (by default) for classes that set theopacityto.670- (by default) for classes that set theopacityto.780- (by default) for classes that set theopacityto.890- (by default) for classes that set theopacityto.9100- (by default) for classes that set theopacityto1 (normal)