likes
comments
collection
share

简单用css mask在遮罩层上镂空一个矩形

作者站长头像
站长
· 阅读数 34

前言

本篇文章讲解怎么用 CSS mask 快速地在背景上镂空一个矩形。大家可以结合代码来熟悉mask的使用。如果想要详细了解mask的每一个属性，可以继续阅读在章末参考部分的几篇文章。

简单介绍下mask

mdn说 css mask 的功能是 设置遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或全部。我们从语义上可以简单理解它就是用来制作遮罩层的。

css属性mask是诸多mask-*的缩写，就像border也是boder-style等的缩写一样。这里我只介绍接下来用得到的属性：mask-image、mask-size、mask-repeat、mask-position、mask-composite

它们的作用分别是

  • mask-image 指遮罩使用的图片资源，语法上支持CSS3各类渐变，以及url()功能符，image()功能符。
  • mask-size 控制遮罩图片尺寸。
  • mask-position 遮罩层的位置。
  • mask-repeat 是否重复遮罩。
  • mask-composite 当需要把几个遮罩层合成一个遮罩层，这个属性决定了合成的方式。

废话不多说，下面👇我们先举一个mask的简单例子来理解前四个属性（同时也是镂空的第一个步骤）

mask1：用mask裁剪出小矩形遮罩层

先写一个模糊、半透明黑色、全屏的遮罩层。

<body>
  <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
  <div class="mask"></div>
</body>

<style>
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);  /* 暗度 */
    backdrop-filter: blur(2px); /* 模糊度 */
    z-index: 9999;
  }

  .content {
    width: 100%;
    height: 100%;
    word-break: break-all;
  }
</style>

效果如下

简单用css mask在遮罩层上镂空一个矩形

接着我们加上四个mask属性，在上面的基础上裁剪出一个小的矩形遮罩层。注意mask旁边的注释哈，分别介绍了各自的作用：

<body>
  <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
  <div class="mask"></div>
</body>

<style>
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    mask-image: linear-gradient(red, red);  /* 渐变，这里什么颜色都无所谓，因为仅用了渐变值形状 */
    mask-size: 200px 100px; /* 宽200px，高100px */
    mask-position: 20px 10px; /* x轴方向20px，y轴方向10px */
    mask-repeat: no-repeat; /* 禁止重复遮罩 */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 9999;
  }

  .content {
    width: 100%;
    height: 100%;
    word-break: break-all;
  }
</style>

效果：

简单用css mask在遮罩层上镂空一个矩形

mask2：准备一个全屏的mask

相信上面已经理解了四个属性：mask-image、mask-size、mask-position、mask-repeat。

接下来改下mask的两个属性，写一个全屏的mask。

<body>
  <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
  <div class="mask"></div>
</body>

<style>
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    mask-image: linear-gradient(red, red);
    mask-size: 100%; /* 让mask填满整个背景 */
    mask-position: 0;  /* x轴，y轴方向都是0 */
    mask-repeat: no-repeat;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 9999;
  }

  .content {
    width: 100%;
    height: 100%;
    word-break: break-all;
  }
</style>

效果：

简单用css mask在遮罩层上镂空一个矩形

你可能会说，不使用mask属性，仅有background一样可以写一个全屏的遮罩层样式呀。大家先别急，此处用mask写一个全屏的mask-image，是为了接下来的“遮罩合成”：

mask3：利用“遮罩合成”来镂空

遮罩合成就需要用到mask-composite属性。为了镂空，我们设置它的值为 exclude。exclude 作用是将遮罩图片(mask-image)重合的地方排除，当作透明处理。

简单用css mask在遮罩层上镂空一个矩形

那可以想象合成mask1和mask2之后，效果如下

简单用css mask在遮罩层上镂空一个矩形 代码：

在一个元素中设置两个或两个以上的mask的写法是：设置mask-*系列的属性值时用逗号分组；每个组在不同mask-*值中，按顺序中一一对应。

<body>
  <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
  <div class="mask"></div>
</body>

<style>
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* mask1、mask2都是矩形（借用css渐变画出形状） */
    mask-image: linear-gradient(red, red), linear-gradient(red, red); 
    /* mask1是200*100，mask2是100%填充 */
    mask-size: 200px 100px, 100%;
    /* mask1是位置在（20，10），mask2在（0，0） */
    mask-position: 20px 10px, 0;
    mask-repeat: no-repeat;
    mask-composite: exclude; /* 遮罩合成方式：exclude */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 9999;
  }

  .content {
    width: 100%;
    height: 100%;
    word-break: break-all;
  }
</style>

参考

转载自:https://juejin.cn/post/7364388815908978688
评论
请登录