无法更改文本背后的背景，其中正在播放视频

Question

我制作了一个文本，里面正在播放视频。我无法将文本后面的背景更改为与白色不同的颜色。我想添加一张照片作为背景而不是白色。我正在使用顺风 css。有人知道怎么做吗？

    <div class="container grid">
      <div
        class="absolute flex justify-center items-center overflow-hidden w-full h-screen"
      >
        <video
          class="absolute top-0 left-0 object-cover w-full h-full"
          autoplay
          muted
          loop
          src="../img/barber.mp4"
          type="video/mp4"
        ></video>
        <h1
          class="absolute top-0 left-0 text-[25vw] text-center text-[#000] leading-[100vh] bg-[#fff] mix-blend-screen w-full h-full"
        >
          BARBER
        </h1>
      </div>
    </div>

Answer 1

Tailwind 并不打算做一切 CSS 可以做的事情。它为标题元素提供 color gradients, but it doesn't sound like that's what you want. Just use some custom styling to apply your background image。

<style>
h1.fancy-bg {
  background-image: url(https://via.placeholder.com/800);
  background-size: cover;
  background-position: center;
}
</style>

<div class="container grid">
  <div
    class="absolute flex justify-center items-center overflow-hidden w-full h-screen"
  >
    <video
      class="absolute top-0 left-0 object-cover w-full h-full"
      autoplay
      muted
      loop
      src="../img/barber.mp4"
      type="video/mp4"
    ></video>
    <h1
      class="absolute top-0 left-0 text-[25vw] text-center text-[#000] 
        leading-[100vh] bg-[#fff] mix-blend-screen w-full h-full fancy-bg"
    >
      BARBER
    </h1>
  </div>
</div>

无法更改文本背后的背景，其中正在播放视频

Can't change the background behind a text, in which a video is playing inside it

html

css

video

text

tailwind-css