欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)鏤空遮罩效果

  發(fā)布時(shí)間：2019-08-20 14:01:10   作者：佚名   我要評論
這篇文章主要介紹了CSS實(shí)現(xiàn)鏤空遮罩效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前一陣子面試被問題到這個(gè)問題，突然懵逼了，腦子一片空白，以前知道這種效果，比如什么值得買的改版引導(dǎo)頁面：

 

當(dāng)時(shí)再緊張也應(yīng)該打出一種實(shí)現(xiàn)方法，就是什么值得買這種使用圖片實(shí)現(xiàn)

 

它首先加了一個(gè)半透明的黑色蒙層（ background-color: rgba(0,0,0,.8) ）然后添加提前制作好的圖片作為子元素，然后通過決定定位，讓圖片與被遮蓋的部分的定位相同，制造出一種假的鏤空的效果

雖然這種方式處理定位有一些麻煩，并且不適合頁面有滾動的情況，滾動的時(shí)候可能出現(xiàn)錯(cuò)位。

但是當(dāng)時(shí)怎么也應(yīng)該答出這種方式，但是確實(shí)一面試就緊張，腦子不轉(zhuǎn)了，就想著添加一個(gè)偽元素，但是不知道怎么穿透。

回來查了一些資料，找到了幾種實(shí)現(xiàn)的方法

首先準(zhǔn)備好要被遮罩的DOM結(jié)構(gòu)：

<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;
}

 此時(shí)的效果：

 

要實(shí)現(xiàn)的效果：

 

透明邊框

中間的鏤空部分為實(shí)際的 width 和 height ，為完全透明的背景，而四周半透明的遮罩使用 rgba 的 border 來實(shí)現(xiàn)

.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;
}

透明輪廓

使用邊框的地方，大多數(shù)時(shí)候都可以使用輪廓 outline 來替代，實(shí)際上沒有什么不同，只是要注意， outline 是不占據(jù)文檔流空間的，所以定位方式與使用 border 時(shí)不同

.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;
}

透明陰影

還可以使用透明陰影實(shí)現(xiàn)，主要利用了陰影的第四個(gè)擴(kuò)展半徑這個(gè)參數(shù)

.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實(shí)現(xiàn)

可以使用強(qiáng)大的Canvas實(shí)現(xiàn)，當(dāng)然使用Cavnas就需要使用腳本來編寫了，雖然有些復(fù)雜，但是使用靈活，能夠適應(yīng)各種不同的要求，比如同時(shí)鏤空多個(gè)等等。

使用Canvas也有兩種方式來實(shí)現(xiàn)，第一種方式是使用 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 直接畫出這樣的一個(gè)形狀，這里就需要介紹一下 非零環(huán)繞規(guī)則

 

所以在畫外圍的半透明矩形時(shí)順時(shí)針，那么里面鏤空的矩形就需要逆時(shí)針：

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();

// 內(nèi)層
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實(shí)現(xiàn)

我對SVG基本上是不了解的，直接復(fù)制修改了一段代碼

<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>

也不是很復(fù)雜。

總結(jié)

  • 如果頁面布局尺寸都是固定的，可以使用CSS的三種方法實(shí)現(xiàn)
  • 如果實(shí)現(xiàn)效果比較復(fù)雜，可以使用Canvas或者SVG實(shí)現(xiàn)
  • 如果要偷懶，可以讓UI出一張圖片實(shí)現(xiàn)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)鏤空遮罩效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！

相關(guān)文章

最新評論