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