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

发布于 2025-01-13 09:08:45 字数 796 浏览 4 评论 0原文

我制作了一个文本，其中正在播放视频。我无法将文本后面的背景更改为与白色不同的颜色。我想添加照片作为背景而不是白色。我正在使用顺风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>

原文

I have made a text inside which a video is playing. I can't change the background, behind the text, to something different that white color. I would like to add a photo as a background instead of white color. I am using tailwind css. Does someone know how to do that?

    <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮倦 2025-01-20 09:08:45

Tailwind 并不打算做 CSS 能做的一切。它提供了颜色渐变，但听起来这不是你想要的。只需使用一些自定义样式来应用您的背景图片到标题元素。

<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>

Tailwind isn't intended to do everything CSS can do. It provides color gradients, but it doesn't sound like that's what you want. Just use some custom styling to apply your background image to the heading element.

<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>

回复收藏 0 原文

~没有更多了~