如何使用 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%。

在支援CSS 遮罩的瀏覽器中，例如Firefox 和現代版本的Microsoft Edge，以下語法是首選：

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

此程式碼建立一個垂直漸層遮罩版，淡出元素的底部部分，露出背景影像。

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