使用 vh 和 vw 单位时 CSS 绝对位置失败

Question

我正在使用以下代码来掩盖 svg 文本中的背景视频以及周围的一些其他文本。vh我的问题是，尽管我使用和单位，但白色文本在调整大小时不会保持其位置vw。并且白色标题和白色描述到MASK的距离不一样。

body {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

.font-serif font-family: Georgia, Cambria, "Times New Roman", Times, serif;

.font-mono  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  margin: 0;

  padding: 0;

}

.container {

  position: relative;

  height: 100vh;

  width: 100%;

  background: #000;

}

.headline-wrapper {

  position: absolute;

  top: 2vh;

  left: 1.4%;

}

.headline {

  margin: 0;

  font-size: 8vw;

  font-weight: 600;

  color: #fff;

  text-transform: uppercase;

}

.description-wrapper {

  position: absolute;

  top: 70vh;

  left: 1.4%;

}

.description {

  margin: 0;

  font-size: 4vw;

  font-weight: 400;

  color: #fff;

}

.video-wrapper {

  position: relative;

  overflow: hidden;

  clip-path: url(#mask);

}

.video {

  width: 100%;

  height: 100vh;

  object-fit: cover; 

}

.mask-text {

  text-anchor: start;

  font-size: 16vw;

  font-weight: bold;

}

<section>

  <div class="container">

    <div class="headline-wrapper">

      <h3 class="headline">Headline</h3>

    </div>

    <div class="description-wrapper">

      <p class="description">Description</p>

    </div>

    <div class="video-wrapper">

      <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video>

      <svg><clipPath id="mask"><text class="mask-text" x="2%" y="55vh">MASK</text></clipPath></svg>

    </div>

  </div>

</section>

我的目标是将白色文本保持在其位置，始终与 MASK 文本保持相同的距离，以便它具有响应能力。如何才能实现这一目标？有没有一个 only-css 解决方案？

Answer 1

我会将元素放置在中心周围，然后使用平移来偏移它们。我还将考虑使用遮罩而不是剪辑路径，以轻松使其位于中心。viewBox更改 SVG 时，您可能需要调整font-familybody {&nbsp; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";&nbsp; margin: 0;&nbsp; padding: 0;}.container {&nbsp; position: relative;&nbsp; height: 100vh;&nbsp; background: #000;&nbsp; color: #fff;}.headline-wrapper {&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; transform:translateY(-180%);&nbsp; left: 1.4%;}.headline {&nbsp; margin: 0;&nbsp; font-size: 8vw;&nbsp; font-weight: 600;&nbsp; text-transform: uppercase;}.description-wrapper {&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; transform:translateY(120%);&nbsp; left: 1.4%;}.description {&nbsp; margin: 0;&nbsp; font-size: 4vw;&nbsp; font-weight: 400;}.video-wrapper {&nbsp; height: 100%;&nbsp; &nbsp;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;}.video {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; object-fit: cover;&nbsp; display:block;}.mask-text {&nbsp; text-anchor: start;&nbsp; font-size: 16vw;&nbsp; font-weight: bold;}<section>&nbsp; <div class="container">&nbsp; &nbsp; <div class="headline-wrapper">&nbsp; &nbsp; &nbsp; <h3 class="headline">Headline</h3>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="description-wrapper">&nbsp; &nbsp; &nbsp; <p class="description">Description</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="video-wrapper">&nbsp; &nbsp; &nbsp; <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video>&nbsp; &nbsp; </div>&nbsp; </div></section>