Image EditingLesson 197Free preview

Change Image Opacity

This lesson is part of Web Developer Tools · All levels

Summary

The opacity controller makes the image semi-transparent by changing the alpha value of each pixel. A 0% value means the image is not visible at all, while 100% means completely opaque. The results must be stored in a format that supports transparency such as PNG or WebP so that the effect does not go away.

Key points

Opacity sets the image opacity rate from 0% to 100%.
The alpha value is stored per pixel, not as a global setting in the file.
JPEG doesn't support alpha, so the transparent background will be solid color.
Opacity is often used for watermarks, overlays, and shadows
In CSS, opacity affects the elements and their contents.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.