css如何實(shí)現(xiàn)遮罩層

小編給大家分享一下css如何實(shí)現(xiàn)遮罩層，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

遮罩層的實(shí)現(xiàn)方法：首先創(chuàng)建一個(gè)html示例文件；然后在“img_container”樣式里定義“position: relative;”；接著設(shè)置absolute的絕對(duì)定位；最后添加鼠標(biāo)移動(dòng)上去顯示遮罩層的腳本代碼即可。

本文操作環(huán)境：windows7系統(tǒng)、Dell G3電腦、HTML5&&CSS3。

遮罩層怎么做？

css做遮罩層示例：

先看下我們的html，很簡(jiǎn)單，一個(gè)img圖片控件，和一個(gè)有mask樣式的div，里面有文字，這個(gè)就是遮罩層。

然后看下樣式定義，先看下圖片容器和圖片的樣式，如圖，其中要注意的是img_container樣式里定義了position: relative;這個(gè)主要是為了讓我們的遮罩層做絕對(duì)定位做準(zhǔn)備的。

再看下遮罩層的樣式定義，代碼如圖，其中需要注意的是他的定位樣式，我們?cè)O(shè)置了absolute的絕對(duì)定位，另外還有半透明的background樣式設(shè)置：

background: rgba(0, 0, 0, 0.7);

可以通過修改后面的0.7這個(gè)數(shù)字來(lái)改變透明度。1為完全不透明，0為完全透明。

接著添加鼠標(biāo)移動(dòng)上去顯示遮罩層的腳本代碼。這個(gè)js代碼用jquery來(lái)寫，方便，簡(jiǎn)單一點(diǎn)，所以我們先引入jquery腳本庫(kù)。

添加mouseover，mouseout事件，主要就是當(dāng)鼠標(biāo)移動(dòng)到圖片容器上時(shí)，顯示遮罩層，移出時(shí)，隱藏遮罩層。代碼如圖

以上是“css如何實(shí)現(xiàn)遮罩層”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！