如何为css掩码设置最大值？

Question

我正在使用这段代码在一个视频层的顶部实现一个svg掩码。它工作得很好，但是我如何为css-mask设置一个max值，这样我就可以控制它的最大大小？

我的代码现在看起来像这样：

​

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: min(8vw, 82px);
  font-weight: 600;
  text-transform: uppercase;
}

.description-wrapper {
  position: absolute;
  top: 50%;
  transform:translateY(120%);
  left: 1.4%;
}

.description {
  margin: 0;
  font-size: min(5vw, 57px);
  font-weight: 400;
}

.video-wrapper {
  height: 100%;
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -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="system-ui">MASK</text></svg>') center/contain no-repeat;

}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

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

​

我的目标是为css掩码设置一个max属性，类似于font-size属性。我如何才能做到这一点，这样我才能防止溢出：

​

​

Answer 1

我看到你在用min()。您可以对mask-size执行相同的操作

​

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: min(8vw, 82px);
  font-weight: 600;
  text-transform: uppercase;
}

.description-wrapper {
  position: absolute;
  top: 50%;
  transform:translateY(120%);
  left: 1.4%;
}

.description {
  margin: 0;
  font-size: min(5vw, 57px);
  font-weight: 400;
}

.video-wrapper {
  height: 100%;
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -10 70 12"><text font-family="monospace">MASK</text></svg>') center left/min(100%,1000px) auto no-repeat;
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -10 70 12"><text font-family="system-ui">MASK</text></svg>') center left/200px auto no-repeat;

}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

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

​