使用 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-family

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

  margin: 0;

  padding: 0;

}

.container {

  position: relative;

  height: 100vh;

  background: #000;

  color: #fff;

}

.headline-wrapper {

  position: absolute;

  top: 50%;

  transform:translateY(-180%);

  left: 1.4%;

}

.headline {

  margin: 0;

  font-size: 8vw;

  font-weight: 600;

  text-transform: uppercase;

}

.description-wrapper {

  position: absolute;

  top: 50%;

  transform:translateY(120%);

  left: 1.4%;

}

.description {

  margin: 0;

  font-size: 4vw;

  font-weight: 400;

}

.video-wrapper {

  height: 100%;

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

           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 {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display:block;

}

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

    </div>

  </div>

</section>