如何為現代網站創建 CSS 不透明度漸變效果？

實作CSS 不透明度漸變效果

對於具有動態背景顏色的現代網站，可以實現與透明度所提供的範例類似的不漸變效果使用CSS，但需要替代方法。

與使用白色疊加層相反，CSS 遮罩屬性提供了更通用的解決方案。一個技巧是定義一個本身就是漸變的遮罩，並將終點設為透明（透過 alpha 值）。

<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>

對遮罩屬性的支援目前僅限於現代版本的 Chrome、Safari、和歌劇。 Firefox 目前僅支援 SVG 蒙版。

但是，令人興奮的發展是，除 Internet Explorer 外，所有主要瀏覽器現在都支援所有提到的蒙版屬性。這允許在網路上無縫實現 CSS 不透明度漸層。

有關純色背景的完整演示，請參閱以下程式碼：

<code class="css">p  {
  color: red;
  font-size: 30px;
  -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));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

以上是如何為現代網站創建 CSS 不透明度漸變效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！