CSS實現(xiàn)鏤空遮罩效果
我要評論前一陣子面試被問題到這個問題，突然懵逼了，腦子一片空白，以前知道這種效果，比如什么值得買的改版引導(dǎo)頁面：
當(dāng)時再緊張也應(yīng)該打出一種實現(xiàn)方法，就是什么值得買這種使用圖片實現(xiàn)
它首先加了一個半透明的黑色蒙層（ background-color: rgba(0,0,0,.8) ）然后添加提前制作好的圖片作為子元素，然后通過決定定位，讓圖片與被遮蓋的部分的定位相同，制造出一種假的鏤空的效果
雖然這種方式處理定位有一些麻煩，并且不適合頁面有滾動的情況，滾動的時候可能出現(xiàn)錯位。
但是當(dāng)時怎么也應(yīng)該答出這種方式，但是確實一面試就緊張，腦子不轉(zhuǎn)了，就想著添加一個偽元素，但是不知道怎么穿透。
回來查了一些資料，找到了幾種實現(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;
}
此時的效果：
要實現(xiàn)的效果：
透明邊框
中間的鏤空部分為實際的 width 和 height ，為完全透明的背景，而四周半透明的遮罩使用 rgba 的 border 來實現(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ù)時候都可以使用輪廓 outline 來替代，實際上沒有什么不同，只是要注意， outline 是不占據(jù)文檔流空間的，所以定位方式與使用 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;
}
透明陰影
還可以使用透明陰影實現(xiàn)，主要利用了陰影的第四個擴展半徑這個參數(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實現(xiàn)
可以使用強大的Canvas實現(xiàn)，當(dāng)然使用Cavnas就需要使用腳本來編寫了，雖然有些復(fù)雜，但是使用靈活，能夠適應(yīng)各種不同的要求，比如同時鏤空多個等等。
使用Canvas也有兩種方式來實現(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 直接畫出這樣的一個形狀，這里就需要介紹一下 非零環(huán)繞規(guī)則
所以在畫外圍的半透明矩形時順時針，那么里面鏤空的矩形就需要逆時針：
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實現(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的三種方法實現(xiàn)
- 如果實現(xiàn)效果比較復(fù)雜，可以使用Canvas或者SVG實現(xiàn)
- 如果要偷懶，可以讓UI出一張圖片實現(xiàn)
以上所述是小編給大家介紹的CSS實現(xiàn)鏤空遮罩效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了用純CSS實現(xiàn)鏤空效果的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-25
這篇文章主要介紹了CSS實現(xiàn)鏤空效果的示例代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-24CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07- 這篇文章主要介紹了使用CSS實現(xiàn)中間鏤空的圖片遮罩效果的方法,文中同時附帶介紹了一個用CSS3實現(xiàn)的鏤空一個圓形的代碼示例,需要的朋友可以參考下2015-12-24
CSS背景色鏤空技術(shù)實際應(yīng)用及進階分享
這篇文章主要介紹了CSS背景色鏤空技術(shù)實際應(yīng)用及進階相關(guān)資料，需要的朋友可以參考下2026-02-06
這篇文章主要介紹了css3遮罩層鏤空效果的多種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-05-11
