如何在 CSS 中為文字疊加建立動態不透明度漸層？

在CSS 中創建不透明度漸變

儘管有動態背景顏色，但目標是創建一種在尊重文本的同時部分遮擋文字的效果背景。雖然白色疊加層適用於靜態背景，但動態背景需要 CSS 不透明度漸層。

使用 CSS 遮罩圖片

現代瀏覽器（Chrome、Safari、Opera）支援使用CSS遮罩圖片來建立所需的效果。關鍵在於定義一個包含過渡到透明的漸變的蒙版：

<code class="CSS">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

其中rgba(0,0,0,1) 表示完全不透明，而rgba(0,0,0,0 ) 代表完全透明。

演示和相容性

查看演示以觀察實際效果。

請注意該技術依賴 mask-image 屬性，該屬性在舊版瀏覽器中的支援有限。特別是 Firefox，目前支援 SVG 蒙版。

有關更多資訊和瀏覽器相容性詳細信息，請參閱 Caniuse：https://caniuse.com/?search=mask-image

以上是如何在 CSS 中為文字疊加建立動態不透明度漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！