cross-fade()
cross-fade() CSS 函式可用於以定義的透明度混合兩個或多個影像。它可以用於許多基本的影像處理，例如用純色為影像著色，或者透過將影像與徑向漸變結合來突出頁面的特定區域。
語法
警告： 規範和當前實現具有不同的語法。首先解釋規範語法。
規範語法
cross-fade() 函式接受一個影像列表，其中包含一個百分比，用於定義每個影像在與其他影像混合時保留的透明度。百分比值必須不帶引號編碼，必須包含 '%' 符號，並且其值必須介於 0% 到 100% 之間。
該函式可以在 CSS 中任何可以使用普通影像引用地方使用。
交叉淡入淡出百分比
將百分比視為每個影像的透明度值。這意味著 0% 的值表示影像完全透明，而 100% 的值表示影像完全不透明。
cross-fade(url("white.png") 0%, url("black.png") 100%); /* fully black */
cross-fade(url("white.png") 25%, url("black.png") 75%); /* 25% white, 75% black */
cross-fade(url("white.png") 50%, url("black.png") 50%); /* 50% white, 50% black */
cross-fade(url("white.png") 75%, url("black.png") 25%); /* 75% white, 25% black */
cross-fade(url("white.png") 100%, url("black.png") 0%); /* fully white */
cross-fade(url("green.png") 75%, url("red.png") 75%); /* both green and red at 75% */
如果省略任何百分比，所有指定的百分比將相加並從 100% 中減去。如果結果大於 0%，則結果將在所有省略百分比的影像之間平均分配。
在最簡單的情況下，兩個影像之間相互淡入淡出。為此，只需其中一個影像指定百分比，另一個影像將相應地淡入淡出。例如，為第一個影像定義 0% 的值只顯示第二個影像，而 100% 只顯示第一個影像。25% 的值將第一個影像渲染為 25% 的透明度，第二個影像渲染為 75% 的透明度。75% 的值是相反的，顯示第一個影像為 75% 的透明度，第二個影像為 25% 的透明度。
上面也可以寫成
cross-fade(url("white.png") 0%, url("black.png")); /* fully black */
cross-fade(url("white.png") 25%, url("black.png")); /* 25% white, 75% black */
cross-fade(url("white.png"), url("black.png")); /* 50% white, 50% black */
cross-fade(url("white.png") 75%, url("black.png")); /* 75% white, 25% black */
cross-fade(url("white.png") 100%, url("black.png")); /* fully white */
cross-fade(url("green.png") 75%, url("red.png") 75%); /* both green and red at 75% */
如果沒有宣告百分比，則兩個影像都將有 50% 的不透明度，交叉淡入淡出呈現為兩個影像的均勻合併。上面看到的 50%/50% 的例子不需要列出百分比，因為當省略百分比值時，包含的百分比會相加並從 100% 中減去。如果結果大於 0，則在所有省略百分比的影像之間平均分配。
在最後一個例子中，兩個百分比的總和不是 100%，因此兩個影像都包含各自的透明度。
如果沒有宣告百分比並且包含三個影像，則每個影像將有 33.33% 的不透明度。以下兩行（幾乎）相同
cross-fade(url("red.png"), url("yellow.png"), url("blue.png")); /* all three will be 33.3333% opaque */
cross-fade(url("red.png") 33.33%, url("yellow.png") 33.33%, url("blue.png") 33.33%);
舊的已實現語法
cross-fade( <image>, <image>, <percentage> )
cross-fade() 函式的規範允許有多個影像，並且每個影像的透明度值獨立於其他值。但並非一直如此。最初的語法，已在某些瀏覽器中實現，只允許兩個影像，這兩個影像的透明度之和恰好為 100%。最初的語法在 Safari 中受支援，並在 Chrome、Opera 和其他基於 Blink 的瀏覽器中帶有 -webkit- 字首受支援。
cross-fade(url("white.png"), url("black.png"), 0%); /* fully black */
cross-fade(url("white.png"), url("black.png"), 25%); /* 25% white, 75% black */
cross-fade(url("white.png"), url("black.png"), 50%); /* 50% white, 50% black */
cross-fade(url("white.png"), url("black.png"), 75%); /* 75% white, 25% black */
cross-fade(url("white.png"), url("black.png"), 100%); /* fully white */
在已實現的語法中，首先宣告兩個用逗號分隔的影像，然後是逗號和必需的百分比值。省略逗號或百分比會使值無效。百分比是第一個宣告影像的不透明度。包含的百分比從 100% 中減去，差值是第二個影像的不透明度。
規範語法部分中的綠色/紅色示例（百分比總計 150%）和黃色/紅色/藍色示例（包含三個影像）在此實現中是不可能的。
無障礙
瀏覽器不會向輔助技術提供有關背景影像的任何特殊資訊。這主要對螢幕閱讀器很重要，因為螢幕閱讀器不會宣佈其存在，因此不會向其使用者傳達任何資訊。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中語義化地描述它。使用背景影像時，請確保顏色對比度足夠大，以便任何文字在影像上清晰可辨，並且在影像缺失時也能清晰可辨。
正式語法
<cross-fade()> =
cross-fade( <cf-image># )
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<id-selector> =
<hash-token>
示例
cross-fade 的舊語法
HTML
<div class="cross-fade"></div>
CSS
.cross-fade {
width: 300px;
height: 300px;
background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}
結果
規範
| 規範 |
|---|
| CSS 影像模組第 4 級 # cross-fade-函式 |
瀏覽器相容性
載入中…