Comment puis-je fondre du texte sur un arrière-plan à l'aide de dégradés CSS lors du défilement ?

Application d'un masque de dégradé pour estomper le texte sur l'arrière-plan

Souhaitez-vous que votre texte passe en douceur à l'arrière-plan lorsque les utilisateurs font défiler ? Si tel est le cas, appliquer un masque de dégradé sur l'arrière-plan en haut de votre div défilant pourrait être la solution dont vous avez besoin.

Solution :

Heureusement, Webkit propose une solution pratique Option CSS pour cela :

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

Ce code crée un dégradé allant de l'opaque (en haut) au transparent (10 % à partir du bas) pour l'élément. Pour garantir que le contenu ne s'estompe que lors du défilement, ajoutez padding-bottom : 50 %.

Mozilla (Gecko) Fallback :

À l'origine, Firefox exigeait une image de masque SVG, mais prend désormais en charge l'image de masque.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!