如何在 CSS 中混合元素？

混合模式用于确定两个图层（颜色和/或图像）如何相互混合。在本文中，我们将看到如何使用 CSS 混合元素。

方法：在 CSS 中，有两个属性允许我们将颜色和/或图像混合在一起：

• 混合模式
• 背景混合模式

1. 使用 mix-blend-mode 属性： mix-blend-mode属性用于在元素和它后面的元素之间进行混合。

句法：

mix-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;

示例：下面的示例演示了 HTML div元素与 CSS 部分中提到的一张背景图像的混合。

HTML

  

  
    
  

  

    
        

            
Geeks for Geeks
        
    

  

输出：

代码的输出

2. 使用 background-blend-mode 属性： background-blend-mode属性用于混合背景图像及其背景颜色元素。

句法：

background-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;

例子：

HTML

  

    

  

    
        
 background-blend-mode
        

    

  

输出：

代码的输出