如何使用蒙版建立 CSS 不透明度漸層？

CSS 不透明度漸變

目標是創建一個類似於所提供示例的基於CSS 的效果，其中應用了漸變疊加在具有動態顏色的背景上。

使用 CSS 遮罩

在 CSS 中，您可以使用遮罩來實現此目的。雖然瀏覽器對此方法的支援仍然有限，但現代版本的 Chrome、Safari 和 Opera 支援必要的屬性（-webkit-mask-image 和 -webkit-mask-size 等）。

關鍵是創建一個本身就是漸變的蒙版，從完全不透明（可見）開始到透明（不可見）結束。這將導致其下方的內容產生漸變效果。

程式碼實作

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)));
}

範例用法

此CSS 可以套用於段落元素以顯示具有漸變效果的效果文字：

<p>This is a paragraph with a CSS opacity gradient.</p>

在此範例中，文字將以紅色顯示在漸變中，從左側的不透明漸變到左側的透明右邊的。透明度允許當您向右移動時背景顏色顯示。

要注意的是，需要設定背景元素的顏色才能看到不透明度漸層效果。在提供的範例中，背景顏色為淺藍色：

  <p>This is a paragraph with a CSS opacity gradient.</p>

以上是如何使用蒙版建立 CSS 不透明度漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！