CSS实现镂空遮罩

前一阵子面试被问题到这个问题，忽然懵逼了，脑子一片空白，之前知道这种效果，好比什么值得买的改版引导页面：

当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现

它首先加了一个半透明的黑色蒙层（background-color: rgba(0,0,0,.8)）而后添加提早制做好的图片做为子元素，而后经过决定定位，让图片与被遮盖的部分的定位相同，制造出一种假的镂空的效果

虽然这种方式处理定位有一些麻烦，而且不适合页面有滚动的状况，滚动的时候可能出现错位。

可是当时怎么也应该答出这种方式，可是确实一面试就紧张，脑子不转了，就想着添加一个伪元素，可是不知道怎么穿透。

回来查了一些资料，找到了几种实现的方法

首先准备好要被遮罩的DOM结构：

<div class="outer">
  <div class="content">
    <p>这是要露出来的字</p>
    <p>这是要露出来的字</p>
    <p>这是要露出来的字</p>
  </div>
  <div class="inner"></div>
</div>
复制代码

以及样式：

.outer {
  position: relative;
  margin: 20px 0;
  height: 500px;
  background: darksalmon;
  overflow: hidden;
}

.content {
  width: 200px;
  height: 80px;
  color: #FFF;
  line-height: 1.5;
  background: #5b8b7b;
  margin: 100px 0 0 100px;
}
复制代码

此时的效果：

要实现的效果：

透明边框

中间的镂空部分为实际的width和height，为彻底透明的背景，而四周半透明的遮罩使用rgba的border来实现

.inner {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: content-box;
  width: 200px;
  height: 80px;
  border-color: rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-width: 100px 1500px 1500px 100px;
  background: transparent;
}
复制代码

透明轮廓

使用边框的地方，大多数时候均可以使用轮廓outline来替代，实际上没有什么不一样，只是要注意，outline是不占据文档流空间的，因此定位方式与使用border时不一样

.inner2 {
  position: absolute;
  left: 100px;
  top: 100px;
  box-sizing: content-box;
  width: 200px;
  height: 80px;
  outline: rgba(0, 0, 0, 0.5) 1500px solid;
  background: transparent;
}
复制代码

透明阴影

还能够使用透明阴影实现，主要利用了阴影的第四个扩展半径这个参数

.inner3 {
  position: absolute;
  left: 100px;
  top: 100px;
  box-sizing: content-box;
  width: 200px;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1500px;
  background: transparent;
}
复制代码

使用Canvas实现

能够使用强大的Canvas实现，固然使用Cavnas就须要使用脚原本编写了，虽然有些复杂，可是使用灵活，可以适应各类不一样的要求，好比同时镂空多个等等。

使用Canvas也有两种方式来实现，第一种方式是使用clearRect方法，比较简单：

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

ctx.fillRect(0, 0, 1500, 1500);
ctx.clearRect(100, 100, 200, 80);
复制代码

另外一种方式是本身经过path直接画出这样的一个形状，这里就须要介绍一下非零环绕规则

因此在画外围的半透明矩形时顺时针，那么里面镂空的矩形就须要逆时针：

const canvas = document.querySelector('#canvas2');
const ctx = canvas.getContext('2d');

// 外围
ctx.moveTo(0, 0);
ctx.lineTo(1500, 0);
ctx.lineTo(1500, 1500);
ctx.lineTo(0, 1500);
ctx.closePath();

// 内层
ctx.moveTo(300, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 180);
ctx.lineTo(300, 180);
ctx.closePath();

ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fill();
复制代码

使用SVG实现

我对SVG基本上是不了解的，直接复制修改了一段代码

<svg class="svg" width="1500" height="500">
  <defs>
    <mask id="myMask">
      <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
      <rect width="200" height="80" x="100" y="100" style="fill: #000"></rect>
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: rgba(0, 0, 0, 0.6); mask: url(#myMask)"></rect>
</svg>
复制代码

也不是很复杂。

总结

• 若是页面布局尺寸都是固定的，能够使用CSS的三种方法实现
• 若是实现效果比较复杂，能够使用Canvas或者SVG实现
• 若是要偷懒，可让UI出一张图片实现

参考

• 浏览器中遮罩层镂空效果的多种实现方法@CSDN
• canvas-------绘制镂空的正方形+非零环绕规则@CSDN
• HTML5 canvas clearRect() 方法@W3Sschool