ImagesLesson 75Free preview
Transparent Image Text
This lesson is part of How To · All levels
Summary
Image text uses a text box with a semi-transparent background above the photo, often with a blurred glass effect. The alpha on the background color determines how big the image is still visible. The backdrop-filter effect can fine-tune the area behind the text so that it is easy to read.
Key points
- The color RGB with alpha below 1 produces a transparent background.
- Backdrop-filter: blur() obscures the area behind the elements.
- Semi-transparent thin boundaries clarify the boundaries of the glass box.
- The contrast of the text should remain adequate despite the transparent background.
- Provide a back-up color for the browser without a back-drop filter.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.