How to Fade Text into a Background Using a CSS Gradient Mask?

Applying a Gradient Mask to Fade Text into Background

Introduction

Incorporating a full-screen fixed background image into a scrolling div often presents the challenge of smoothly fading out the overlying text as users scroll down. This article explores a solution using a gradient mask in CSS.

Question

How can you apply a gradient mask in CSS to fade text into the background over only a portion of the element, creating a gradual fading effect?

Answer

Using Webkit's -webkit-mask-image property, you can achieve the desired effect:

-webkit-mask-image: -webkit-gradient(
    linear,
    left 90%,
    left bottom,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
);

This code creates a linear gradient that fades from opaque black at the top of the element to transparent at the bottom 10%. By adding padding-bottom: 50% to the element, you can ensure that the content is only faded when there is more to scroll.

Notes

• This solution requires browser compatibility, as it relies on Webkit's proprietary -webkit-mask-image property.
• Mozilla (Gecko) has a similar 'mask' feature that requires an SVG image as an input, which can be embedded using base64 encoding.

The above is the detailed content of How to Fade Text into a Background Using a CSS Gradient Mask?. For more information, please follow other related articles on the PHP Chinese website!