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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。