CSS 函式 - cross-fade()

CSS 中的cross-fade()函式用於以指定的透明度混合兩個或多個影像或顏色。

語法

cross-fade(url(image1.png) <percentage>, url(image2.png) <percentage>);

cross-fade()函式的引數採用影像列表的形式，其中包含百分比值，該值定義了與其他影像混合時保留每個指定影像的多少。百分比值必須在0 到 100範圍內，必須包含%符號，並且不能用引號括起來。

百分比實際上是每個影像的不透明度值，其中0%表示影像完全透明，100%表示影像完全不透明。
如果未指定百分比值，則將所有其他百分比值相加並從 100% 中減去。
如果結果大於 0%，則該結果將平均分配給所有未指定百分比值的影像。
如果需要混合兩張影像，只需其中一張影像具有百分比值，另一張影像將相應地混合到其中。
如果任何影像均未指定百分比值，則兩張影像都將以 50% 的不透明度呈現。
如果兩張影像的百分比值之和大於 100%，則兩張影像都將僅以各自的百分比值呈現。
如果指定三張影像且未傳遞百分比值，則三張影像都將以 33.33% 的不透明度呈現。

輔助功能問題：不會向輔助技術提供有關背景影像的特殊資訊，因此螢幕閱讀器也不會宣佈有關背景影像的任何資訊。如果此類背景影像很重要並向用戶傳達任何資訊，則輔助技術將錯過這些資訊。建議在文件中語義化地描述此類資訊。

注意：必須根據瀏覽器使用相應的供應商字首，例如，在使用 Chrome 時，使用-webkit字首。

CSS cross-fade() - 使用帶有 URL 的兩張影像

以下示例演示了cross-fade()函式的使用，其中列出了兩張影像和一個百分比值，該值決定了這兩張影像的混合方式。

<html>
<head>
<style>
   #box {
      width: 700px;
      height: 500px;
   
      /* cross-fade() where 45% of the second image and balance 55% of first image will be blended */
      background-image: -webkit-cross-fade(
         url("images/border.png"), url("images/tree.jpg"), 45%);
      }
</style>
</head>
<body>
   <h1>Cross-fade</h1>
   <div id="box"></div>
</body>
</html>

CSS cross-fade() - 使用 linear-gradient()

以下示例演示了cross-fade()函式的使用，其中列出了兩張使用linear-gradient()建立的影像和一個百分比值，該值決定了這兩張影像的混合方式。

<html>
<head>
<style>
   #box {
      width: 700px;
      height: 500px;
   
      /* cross-fade() where 85% of the second image and balance 15% of first image will be blended */
      background-image: -webkit-cross-fade(
         linear-gradient(red, yellow), linear-gradient(white, lightblue), 85%);
      }
</style>
</head>
<body>
   <h1>Cross-fade</h1>
   <div id="box"></div>
</body>
</html>

列印頁面