滤镜和混合模式一起使用实例页面

展示

代码

• HTML：

  <div class="night"></div>
  
  <p>素描</p>
  <div class="sketch"></div>
  <p>水彩</p>
  <div class="watercolor"></div>
  <p>彩铅</p>
  <div class="pencil"></div>

• CSS：

  .night {
      width: 256px; height: 256px;
      background: rgba(0,40,140,.6) url(./house-bed.jpg);
      background-size: 100%;
      background-blend-mode: darken;
      filter: brightness(80%) grayscale(20%) contrast(1.2);
  }
  
  .sketch {
      width: 256px; height: 171px;
      background: url(10.jpg) -2px -2px, url(10.jpg);
      background-size: 258px 173px;
      background-blend-mode: difference;
      filter: brightness(3) invert(1) grayscale(1);
  }
  .watercolor {
      width: 256px; height: 171px;
      position: relative;
      overflow: hidden;
  }
  .watercolor::before {
      content: '';
      display: block;
      height: inherit;
      background: url(10.jpg) -2px -2px, url(10.jpg);
      background-size: 100%;
      background-blend-mode: difference;
      filter: brightness(2) invert(1) grayscale(1);
  }
  .watercolor::after {
      content: '';
      position: absolute; left: 0; top: 0;
      height: inherit; width: inherit;
      background: url(10.jpg) -1px -1px;
      background-size: 100%;
      mix-blend-mode: multiply;
      filter: brightness(1.3) blur(2px) contrast(2);
  }
  .pencil {
      width: 256px; height: 171px;
      position: relative;
      overflow: hidden;
  }
  .pencil::before {
      content: '';
      display: block;
      height: inherit;
      background: url(10.jpg) -1px -1px, url(10.jpg);
      background-size: calc(100% + 1px);
      background-blend-mode: difference;
      filter: brightness(2) invert(1) grayscale(1);
  }
  .pencil::after {
      content: '';
      position: absolute; left: 0; top: 0;
      height: inherit; width: inherit;
      background: url(10.jpg);
      background-size: 100%;
  }