CSS cross-fade屬性用法及代碼示例

cross-fade屬性用於在兩個給定圖像之間形成一種混合。簡而言之，它用於按百分比將圖像混合在一起。

用法:

cross-fade( <image, <image>, <percentage> )

屬性值：

它沒有屬性值，而是拍攝了兩個圖像和一個數字，指示所需的混合量。

範例1：

如果cross-fade為0％，則第一張圖像為白色，第二張圖像為黑色，然後以這樣的方式進行混合：存在85份白色圖像和15份黑色圖像。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
#box{ 
    width:250px; 
    height:150px; 
    /* 15 parts of black and 85 parts of white */
    background-image:-webkit-cross-fade( 
      url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125439/w-200x141.JPG") 
      ,url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG") 
      ,15%); 
} 
</style> 
<body> 
  <h1>Cross-fade</h1> 
  <div id="box"> 
  </div> 
</body> 
</html>

輸出：

範例2：

如果cross-fade為0％，則第一個圖像為黑色，第二個圖像為白色，然後以這樣的方式進行混合：存在0份白色圖像和100份黑色圖像。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
#box{ 
    width:250px; 
    height:150px; 
    /* 15 parts of black and 85 parts of white */
    background-image:
    -webkit-cross-fade( 
    url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG"), 
    url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20200714130459/01.JPG"), 
    0%); 
} 
</style> 
<body> 
  <h1>Cross-fade at 0%</h1> 
  <div id="box"> 
  </div> 
</body> 
</html>

輸出：

支持的瀏覽器：

Firefox 3.0
Edge
Chrome
Safari

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 CSS cross-fade Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。