CSS 绝对定位在使用 vh 和 vw 单位时失效

Question

CSS 绝对定位在使用 vh 和 vw 单位时失效

4

我使用以下代码将背景视频掩盖在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文本保持相同的距离，以便响应。如何实现这一目标？是否有仅基于CSS的解决方案？

- Niklas Grewe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Answer 1

我会将元素放置在中心周围，然后使用翻译进行偏移。我还会考虑使用蒙版而不是裁剪路径来轻松地使它位于中心。

当更改font-family时，您可能需要调整SVG的viewBox

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>