📜  CSS 交叉淡入淡出属性

📅  最后修改于: 2021-09-01 01:55:28             🧑  作者: Mango

交叉淡入淡出属性用于在两个给定图像之间形成一种混合。简而言之,它用于按百分比将图像混合在一起。

句法:

cross-fade( ,  )

适当的价值:

  • 它没有属性值,相反,它需要两个图像和一个指示所需混合量的数字。

示例 1:

在第一个图像为白色,第二个图像为黑色的 0% 处交叉淡入淡出,然后以这样的方式进行混合,即有 85 部分白色图像和 15 部分黑色图像。




  
  
  Document



  

Cross-fade

  
  

输出:

示例 2:

在第一个图像为黑色而第二个图像为白色的 0% 处交叉淡入淡出,然后以这样一种方式进行混合,即有 0 部分白色图像和 100 部分黑色图像。




  
  
  Document



  

Cross-fade at 0%

  
  

输出:

支持的浏览器:

  • 火狐 3.0
  • 边缘
  • 铬合金
  • 苹果浏览器