# 图片滤镜使用

mix-blend-mode混合模式中有一种混合模式名为滤色，单词是 screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。

<div class="figure">
  <img
    src="https://source.unsplash.com/VW8MUbHyxCU/1920x1080"
    alt=""
    class="image"
  />
  <h1 class="text">Fade-in Text</h1>
</div>

.figure {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: scale(1.8);
  animation: scaleImage 5s ease-out forwards;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: calc(10px + 8vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fff;
  background-color: #000;
  mix-blend-mode: multiply;
  opacity: 0;
  margin: 0;
  animation: fadeInText 3s 2s ease-out forwards;
}

@keyframes scaleImage {
  100% {
    transform: scale(1);
  }
}

@keyframes fadeInText {
  100% {
    opacity: 1;
  }
}

视频也是也可以直接设置，只要把我们的视频背景色设置为黑色，同时设置如下 CSS 即可：

video {
  mix-blend-mode: screen;
}