如何使用 CSS 漸層遮罩將文字淡入背景？

應用漸變蒙版將文字淡入背景

簡介

簡介

將完整的-螢幕固定背景圖像放入滾動div 中通常會帶來平滑淡出的挑戰當用戶向下滾動時覆蓋文字。本文探討了在 CSS 中使用漸層蒙版的解決方案。

問題

如何在 CSS中應用漸變蒙版以將文字僅部分淡入背景的元素，創造一個逐漸褪色

解答

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

使用Webkit的-webkit-mask-image屬性，可以達到想要的效果：

這段程式碼創造線性漸變，從元素頂部的不透明黑色漸變到底部的透明10%。透過為元素添加 padding-bottom: 50% ，可以確保只有當有更多捲動內容時內容才會淡出。

• 註解

此解決方案需要瀏覽器相容性，因為它依賴 Webkit 專有的 -webkit-mask-image 屬性。 Mozilla (Gecko) 具有類似的「遮罩」功能，需要 SVG 影像作為輸入，可以使用 base64 編碼嵌入該影像。

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