如何使用混合混合模式和我选择的颜色在视频上叠加文本？

Question

我需要我的文字对其背后的视频透明，而不是文字的背景。

<main>
    <div class="container">
        <video
            src="./pexels-tima-miroshnichenko-5377684.mp4"
            autoplay
            muted
            loop
        ></video>
        <h2>Hello There!</h2>
    </div>
</main>


main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    height: fit-content;
    overflow: hidden;
    display: grid;
}

video,
h2 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: inline;
}

.container h2 {
    margin: 0;
    height: 100%;
    background: #ffdb99;
    font-size: 13vw;
    padding: 0;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
    mix-blend-mode: screen;
    font-family: 'Poppins', sans-serif;
}

这是结果： image of text/video overlay

我需要背景保持不透明，但文本对后面的视频透明！

感谢您提前输入！！希望我的问题很清楚！

Answer 1

此解决方案不适用于视频，但取决于您的视频是否可以使用 GIF？

如果这对您有用，那么您可以将 GIF 或图像设为 h2 的背景，并使用 -webkit 使文本透明。

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    /* Put your solid colour background for your div */
    background: #ffdb99;
    
    width: 60%;
    height: fit-content;
    overflow: hidden;
    display: grid;
}

.container h2 {
    /* This makes the text transparent */
    color: white;  /* incase the transparency doesn't work */
    background: url("https://media.giphy.com/media/115BJle6N2Av0A/giphy.gif") no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
   
    margin: 0;
    font-size: 13vw;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

<main>
    <div class="container">
        <h2>Hello There!</h2>
    </div>
</main>

Answer 2

我不知道如何使用 mix-blend-mode 执行此操作，因为您不能将视频作为正常 CSS 意义上的背景。

但您可以通过在后台 'cutting text holes' 并使用 SVG 蒙版将整个内容覆盖在视频上来实现效果。

这是一个示例，您可以选择颜色，因为它不受任何混合或遮罩的影响：

* {
  margin: 0;
  padding: 0;
}

video {
  width: 100%;
  height: auto;
  z-index: -1;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

text {
  font-size: 10vmin;
  text-anchor: middle;
  font-family: sans-serif;
}

<video src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted loop></video>
<svg width="33vw" height="33vh">
  <mask id="mask" height="100%" width="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
    <text>
      <tspan x="50%" dy="1.2em">HELLO</tspan>
      <tspan x="47%" dy="1em">THERE!</tspan>
    </text>
  </mask>
  <rect width="100%" height="100%" mask="url(#mask)" fill="#ffdb99"></rect>
</svg>

如何使用混合混合模式和我选择的颜色在视频上叠加文本？

How do use mix-blend-mode with the color of my choice to overlay text on a video?

html

css

responsive-design

overlay

mix-blend-mode