如何使用 mix-blend-mode 和我选择的颜色在视频上叠加文本？ [复制]答案

【问题标题】：How do use mix-blend-mode with the color of my choice to overlay text on a video? [duplicate]如何使用 mix-blend-mode 和我选择的颜色在视频上叠加文本？ [复制]
【发布时间】：2021-06-17 12:21:41
【问题描述】：

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

<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

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

提前感谢您的意见！！希望我的问题很清楚！

【问题讨论】：

标签： html css responsive-design overlay mix-blend-mode

【解决方案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>

【讨论】：

@JessicaI 我想知道哪个规则使 GIF 在文本而不是 h2 块中运行。是-webkit-background-clip 吗？如果是，那对我来说完全有意义。
是的，它就是这样工作的，它也可以设置为其他大小，仅用于没有填充等的文本区域。查看 CSS Tricks 上的这个页面 - 它解释了背景剪辑。 css-tricks.com/almanac/properties/b/background-clip

【解决方案2】：

我不知道如何使用 mix-blend-mode 来做到这一点，因为您不能将视频作为普通 CSS 意义上的背景。

但您可以通过在背景中“剪切文本孔”并使用 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>

【讨论】：