Problem: Fullscreen Section with Gradient Overlay
Problem description
Given a <section class="fullscreen-section">, apply a background image and a semi-transparent black linear gradient overlay (from top to bottom). The text should be clearly readable in all cases.
Goal
Ensure the content is readable over any background image by overlaying a black gradient.
Constraints
No JavaScript is allowed.
Do not modify HTML.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Fullscreen Section with Gradient Overlay
Problem description
Given a <section class="fullscreen-section">, apply a background image and a semi-transparent black linear gradient overlay (from top to bottom). The text should be clearly readable in all cases.
Goal
Ensure the content is readable over any background image by overlaying a black gradient.
Constraints
No JavaScript is allowed.
Do not modify HTML.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.