CSS完成镂空遮罩实际效果

日期:2020-12-13 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

前1阵子招聘面试被难题到这个难题,忽然懵逼了,头脑1片空白,之前了解这类实际效果,例如甚么值得买的改版正确引导网页页面:

 

那时候再焦虑不安也应当打出1种完成方式,便是甚么值得买这类应用照片完成

 

它最先加了1个半全透明的黑色蒙层( background-color: rgba(0,0,0,.8) )随后加上提早制做好的照片做为子元素,随后根据决策精准定位,让照片与被遮住的一部分的精准定位同样,生产制造出1种假的镂空的实际效果

尽管这类方法解决精准定位有1些不便,而且不合适网页页面有翻转的状况,翻转的情况下将会出現移位。

可是那时候如何也应当答出这类方法,可是的确1招聘面试就焦虑不安,头脑不转了,就想着加上1个伪元素,可是不知道道如何穿透。

回家查了1些材料,寻找了几种完成的方式

最先提前准备好要被遮罩的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 ,为彻底全透明的情况,而4周半全透明的遮罩应用 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;
}

全透明黑影

还能够应用全透明黑影完成,关键运用了黑影的第4个拓展半径这个主要参数

.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也是有两种方法来完成,第1种方法是应用 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 立即画出这样的1个样子,这里就必须详细介绍1下 非零围绕标准

 

因此在画外围的半全透明矩形框时顺时针,那末里边镂空的矩形框就必须逆时针:

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基础上是不上解的,立即拷贝改动了1段编码

<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的3种方式完成
  • 假如完成实际效果较为繁杂,可使用Canvas或SVG完成
  • 假如要偷懒,可让UI出1张照片完成

以上所述是网编给大伙儿详细介绍的CSS完成镂空遮罩实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑欢迎给我留言,网编会立即回应大伙儿的!