如何使用滾動 CSS 漸層將文字淡入背景？

應用漸變蒙版淡化背景上的文字

您希望文字在使用者滾動時平滑過渡到背景嗎？如果是這樣，在滾動 div 頂部的背景上套用漸層遮罩可能是您需要的解決方案。

解決方案：

幸運的是，Webkit 提供了一種方便的方法CSS 選項：

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

此程式碼建立從不透明（上）到透明的漸層淡入淡出（從底部算起10%）為元素。為了確保內容僅在滾動時褪色，請添加 padding-bottom: 50%。

Mozilla (Gecko) Fallback:

最初，Firefox 需要 SVG 遮罩影像，但現在支援 mask-image。

以上是如何使用滾動 CSS 漸層將文字淡入背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！