【CSS】mask遮罩

出于对b站视频为什么不遮挡人物的好奇，查看了相关的图片和相关文档，发现图片是类似于一个PS的遮罩层：

这张图片是怎么来的，肯定是AI识别出来然后生成的，一张图片也就一两K，一次加载很多张也不会造成很大的负担。查找文档，主要利用了以下属性：

详细相关mark属性：

它可以用于隐藏或部分隐藏一个元素的可见区域，类似于PS中的遮罩概念

对于遮罩
如果元素添加了遮罩属性，那么目标元素将会按照遮罩的形状来显示

遮罩透明的区域，元素也会透明，即该区域被隐藏

通常，遮罩可以是透明的图片或者是带渐变的元素

属性值：
mask-image

mask-repeat

mask-position

mask-clip

mask-origin

mask-size

mask-mode

mask-composite

常见的几种属性

（1）mask-image

mask-image表示使用图片资源作为遮罩
- 默认值为none，即无遮罩图片
- 使用url()来引入图片资源，同背景图片的引入方式
  - 引入的图片资源可以是.jpg、.png、.svg等
  - 注意，linear-gradient生成的渐变也是一种图片，所以也可以使用渐变来作为遮罩

示例说明

先使用线性渐变绘制一个带透明区域的网格背景

.bg {background-image: linear-gradient(to top,#000 0%,#000 50%,transparent 50%,transparent 100%),linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);background-size: 50px 50px;
}
复制代码

然后将这个渐变应用于元素的mask-image属性上

.spider {border: 1px dashed #ccc;-webkit-mask-image: linear-gradient(to top,#000 0%,#000 50%,transparent 50%,transparent 100%),linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);-webkit-mask-size: 50px 50px; /* 这个属性用于控制遮罩图层的大小，在后面会介绍 */
}
复制代码

（2）mask-repeat

mask-repeat表示重复遮罩，作用效果同背景属性background-repeat类似
- 属性值：
  - repeat：默认值，表示重复
  - repeat-x：表示在水平方向上重复
  - repeat-y：表示在垂直方向上重复
  - no-repeat：表示不重复
  - space：表示平铺
  - round：表示尽量靠在一起

示例说明

这里找到一张圆形图片作为遮罩处理

.spider1 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: repeat; /* 默认值，表示重复 */
}
.spider2 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: no-repeat; /* 表示不重复 */
}
复制代码

（3）mask-position

mask-position属性和background-position属性的表现类似，用于控制遮罩的作用位置
- 属性值：
  - 关键字：top、bottom、left、right、center
    - 如果只有一个关键字，则默认缺省的关键字为center
  - 数值：%、px、em、rem等
  - 默认值为 0% 0%，即左上角

示例说明

.spider1 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: no-repeat;-webkit-mask-position: right;
}
.spider2 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: no-repeat;-webkit-mask-position: left;
}
复制代码

（4）mask-clip

mask-clip的表现也和background-clip的表现类似
- 属性值：
  - content-box、padding-box、border-box
  - fill-box、stroke-box、view-box
  - no-clip
- 这个属性需要搭配盒模型相关属性才能看到效果，如margin、padding等

（5）mask-origin

mask-origin用于设置遮罩的起始位置，其行为与表示和background-origin类似
- 主要属性值有：
  - content-box、border-box
  - margin-box、padding-box
  - fill-box、stroke-box、view-box
- 这个属性需要搭配盒模型相关属性才能看到效果，如margin、padding等

（6）mask-size

mask-size用于控制图片的尺寸，其效果和行为与background-size类似
- 属性值：
  - 关键字：
    - contain：使图片完全适应元素区域，保证最短边能够完全显示，剩余部分会自动重复以填充，会保持图片原有宽高比
    - cover：使图片完全覆盖背景区域，保证最长边能够完全填充元素区域，会保持图片原有宽高比
    - auto：自适应
  - 数值：%、em、px、rem

示例代码

.spider1 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: no-repeat;
}
.spider2 {-webkit-mask-image: url('./mask.ico');-webkit-mask-repeat: no-repeat;-webkit-mask-size: cover;
}

【CSS】mask遮罩相关推荐

怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
使用CSS - mask 实现视频弹幕人物遮罩过滤
经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙"的躲到人物的下面,看着非常的智能. 简单的 ...
奇妙的 CSS MASK
本文将介绍 CSS 中一个非常有意思的属性 mask . 顾名思义,mask 译为遮罩.在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 ...
CSS mask 实现鼠标跟随镂空效果
点击下方星标本公众号,实用前端技术文章及时了解偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的 ...
CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
基于CSS mask和clip-path实现切角的技巧
本文翻译自 Tricks to Cut Corners Using CSS Mask and Clip-Path Properties,略有删改原作者:Temani Afif 我们最近使用CSS m ...
moviepy音视频剪辑：使用mask遮罩实现视频叠加透明效果
☞ ░ 前往老猿Python博客 https://blog.csdn.net/LaoYuanPython ░ 一.引言在<moviepy音视频剪辑:mask clip遮罩剪辑.遮片.蒙版的作用 ...
moviepy音视频剪辑：使用mask遮罩剪辑实现叠加透明效果详解
☞ ░ 前往老猿Python博客 https://blog.csdn.net/LaoYuanPython ░ 注:本文为付费专栏文章,如果没订购付费专栏也不想订购相关付费专栏的读者,请阅读对应的免费文 ...
Unity Mask 遮罩无效解决方案
Unity Mask 遮罩无效解决方案前言本人开发的APP有着需要发布到手机.Pico一体机.华为Glass眼镜上的需求,因此项目是一个多合一的工程.由此在制作如文字滑动的效果时,遇到了一个问题 ...

【CSS】mask遮罩

【CSS】mask遮罩相关推荐

最新文章

热门文章