CSS 文字-背景图片纹理、背景视频效果

1、背景图片纹理效果

实现方案：搬运

CSS代码：
.pattern-overlay {
    font-size: 60px;
    font-family: 'microsoft yahei';
    background-image: url(./pattern01.jpg); 
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.pattern-overlay > span {
    position: absolute;
    background-image: linear-gradient(to bottom, #f00, #f00);
    mix-blend-mode: overlay;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.pattern-overlay > span::before {
    content: attr(data-text);    
}
HTML代码：
<h2 class="pattern-overlay">
    <span data-text="CSS纹理叠加"></span>
    CSS纹理叠加
</h2>

主要依赖CSS -webkit-text-fill-color、-webkit-background-clip进行背景处理

2、背景视频效果

主要是用svg背景穿透的效果进行实现

实现方案：

    <div class="text-video-bg">
      <video src="https://www.w3schools.com/howto/rain.mp4" autoplay muted loop></video>
    <svg class="textpage">
      <defs>
        <mask id="mask" x="0" y="0" width="100%" height="100%">
          <rect fill="white" x="0" y="0" width="100%" height="100%" />
          <text font-size="500px" font-weight="bold" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" >
            1995
          </text>
        </mask>
      </defs>
      <rect fill="white"  mask="url(#mask)" x="0" y="0" width="100%" height="100%" />
    </svg>
  </div>

// css
    .text-video-bg{
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
    .textpage{
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 22;
      width: 100%;
      height: 100%;
    }