如何将最大值设置为 css 掩码? [英] How can i set a max-values to a css mask?

查看：23
本文介绍了如何将最大值设置为 css 掩码?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用此代码在视频层顶部实现 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 符号"、Noto Color Emoji"；边距:0；填充:0；}.容器 {位置:相对；高度:100vh；背景:#000；颜色:#fff;}.headline-wrapper {位置:绝对；顶部:50%；变换:translateY(-180%);左:1.4%；}.headline {边距:0；字体大小:min(8vw, 82px);字体粗细:600；文本转换:大写；}.描述包装{位置:绝对；顶部:50%；变换:translateY(120%);左:1.4%；}.描述 {边距:0；字体大小:min(5vw, 57px);字体粗细:400；}.video-wrapper {高度: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>') 居中/不包含重复；mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><文本字体-family="system-ui">MASK</text></svg>') 居中/不重复；}.视频 {宽度:100%；高度:100%；适合对象:覆盖；显示:块；}

<div class="容器"><div class="headline-wrapper"><h3 class="headline">Headline</h3>

<div class="description-wrapper"><p class="description">Description</p>

<div class="video-wrapper"><video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" 静音循环自动播放="true"><<;/视频>

</section>

我的目标是为 css 掩码设置一个 max 属性，类似于 font-size 属性.我该怎么做，这样我才能防止像这样溢出:

解决方案

我看到您正在使用 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 符号"、Noto Color Emoji"；边距:0；填充:0；}.容器 {位置:相对；高度:100vh；背景:#000；颜色:#fff;}.headline-wrapper {位置:绝对；顶部:50%；变换:translateY(-180%);左:1.4%；}.headline {边距:0；字体大小:min(8vw, 82px);字体粗细:600；文本转换:大写；}.描述包装{位置:绝对；顶部:50%；变换:translateY(120%);左:1.4%；}.描述 {边距:0；字体大小:min(5vw, 57px);字体粗细:400；}.video-wrapper {高度: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>') 中左/min(100%,1000px) 自动不重复；mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -10 70 12"><textfont-family="system-ui">MASK</text></svg>') 中左/200px 自动不重复；}.视频 {宽度:100%；高度:100%；适合对象:覆盖；显示:块；}

<div class="容器"><div class="headline-wrapper"><h3 class="headline">Headline</h3>

<div class="description-wrapper"><p class="description">Description</p>

<div class="video-wrapper"><video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" 静音循环自动播放="true"><<;/视频>

</section>

i am using this code to implemente a svg mask in top of a video layer. It works great, but how can i set a max value to the css-mask, so i can control the maxium size of it?

My Code looks like this at moment:

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>

My Goal is to set a max property to the css mask, similar to font-size property. How can i do that, so i can prevent overflow like this:

解决方案

I see you are using min(). You can do the same with the 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>

这篇关于如何将最大值设置为 css 掩码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆