在使用保持颜色的背景混合模式之前应用css -webkit-filter灰度

1 回答

• 2

  您可以使用发光度作为混合模式，在一个步骤中完成 .

  在此模式下，亮度取自前层（图像），色调和饱和度取自背景（此处为纯色）

  以下演示还为您提供了通过类对颜色过滤器进行设置的可能性

  .test {
      width: 400px;
      height: 200px;    
      margin: 10px;
      background-size: cover;
      background-image:  url(http://placekitten.com/1000/750);
  }
  
  .test:hover {
      background-blend-mode: luminosity;
  }
  
  .red {
      background-color: red;
  }
  
  .green {
      background-color: greenyellow;
  }
  

  <div class="test red"></div>
  <div class="test green"></div>
  

  另一种解决方案，图像中的黑色提供完全饱和的颜色（而不是黑色） . 设置起来有点复杂，但可以实现 .

  .test {
      width: 400px;
      height: 200px;    
      background-size: cover;
      background-color: white;
      background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
      background-blend-mode: screen, luminosity;
  }
  

  <div class="test"></div>
  

  将此效果作为可重用类的方法 . 图像已经在元素上，我们只需设置类来设置效果，并设置一个单独的颜色类 .

  所以序列需要是：

  • 第一层=白色

  • 第二层图像，混合设置为亮度 . 这样，图像的亮度与白色结合，白色表示高亮度，黑色表示低亮度（即灰度滤光片）

  • 第三层，纯色，混合设置为屏幕 . 这使白色保持白色，但颜色变为黑色 .

  我们需要为最终混合使用伪元素，以便使用独立类轻松设置所有这些 . 这将使用mix-blend而不是background-blend进行设置：

  #cat {
      width: 760px;
      height: 560px;
      background-image: url(http://placekitten.com/1000/750); 
  }
  
  .test {
      background-color: white;
      background-position: 0px 0px;
      background-size: cover;
      background-blend-mode: luminosity;
      position: relative;
  }
  
  .test:after {
      content: "";
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      mix-blend-mode: screen;
      pointer-events: none;
  }
  
  .blue:after {
      background-color: blue;
  }
  

  <div class="test blue" id="cat"></div>
  

  回复于 2024-05-02T23:39:27+08:00