如何在CSS中實現不透明度漸層？

在CSS 中實現不透明度漸變

為了複製涉及動態背景顏色疊加的特定視覺效果，許多人都在尋求CSS 不透明度漸層的解決方案。雖然問題中提供的範例展示了這種實作的嘗試，但由於程式碼複雜性或瀏覽器限制，它們存在不足。

值得慶幸的是，瀏覽器的進步使得使用 mask-image 屬性。目前由 Chrome、Safari、Opera 以及除 Internet Explorer 之外的所有瀏覽器支持，此屬性提供了更高效且跨瀏覽器相容的解決方案。

CSS 實現：

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

技巧在於使用漸層作為遮罩本身，其中漸變過渡到透明度（透過 alpha 值）。這允許創建根據背景顏色動態調整的疊加效果。

純色背景示例：

[演示鏈接]

附加說明：

支援
• mask-image 的所有影像屬性。
CSS 遮罩僅適用於文字元素和影像的表現可能不符合預期。

以上是如何在CSS中實現不透明度漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！