CSS |将背景图像与渐变叠加相结合

CSS 渐变允许我们显示两种或多种颜色之间的平滑过渡。它们可以通过简单地组合背景图像 url 和渐变属性来添加到背景图像之上。
句法：

• 对于背景图像顶部的线性渐变：

  element {
      background-image: linear-gradient(direction, 
       color-stop1, color-stop2, ...), url('url');
  }

• 对于背景图像顶部的径向渐变：

  element {
      background-image: radial-gradient(direction, 
      color-stop1, color-stop2, ...), url('url');
  }

下面的例子说明了上述方法：
示例 1：具有线性渐变的背景图像。

  

    
    
    
    
    

  

    

        This is my background!
    

  

输出：

示例 2：具有径向渐变的背景图像。

  

    
    
    
    
    

  

    

        This is my background!
    

  

输出：