建站
咨詢
售后
建站咨詢
新聞中心
Jquery mobile中如何實(shí)現(xiàn)遮罩效果
1 背景半透明遮罩層樣式
創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元雙城做網(wǎng)站,已為上家服務(wù),為雙城各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
需要一個黑色（當(dāng)然也可以其他）背景，且須設(shè)置為絕對定位，以下是項目中用到的css樣式：
2 jQuery實(shí)現(xiàn)遮罩
3 提示框
遮罩的目的無非讓人無法操作內(nèi)容，突出提示框，而提示框可參考上面的制作，z-index比遮罩層更高便可。主要問題是，如何控制提示框在瀏覽器居中。
CSS 半透明遮罩層
很多時候，我們需要通過一層半透明的遮罩層來把后面的一切整體調(diào)暗，以便凸顯某個特定的UI元素，引導(dǎo)用戶關(guān)注，比如彈出層或者交互指南。
這個效果的傳統(tǒng)方法就是增加一個額外的HTML元素用于遮擋背景添加如下樣式：
.overlay 遮罩層負(fù)責(zé)把這個元素背后所有的東西調(diào)暗。 .lightbox 需要指定一個更高的 z-index ，一邊繪制在遮罩層的上層。這個方法的優(yōu)點(diǎn)：穩(wěn)定可靠，缺點(diǎn)：需要增加額外的HTML。那怎么由CSS單獨(dú)實(shí)現(xiàn)呢？
我們可以用偽元素消除額外的HTML元素，比如：
缺點(diǎn)： 移植性不好， body 元素上可能有其他需求已經(jīng)占用了 ::before 元素，而且使用這個效果需要JS 給body添加 dimmed 這個類，如果把遮罩層交給元素自己的 ::bofore 偽元素來實(shí)現(xiàn)，就可以彌補(bǔ)不足。給偽元素設(shè)置 z-index:-1; 就可以讓它出現(xiàn)在元素的背后。盡管這解決了可移植的問題，但無法對遮罩層Z軸層次進(jìn)行細(xì)粒度的控制，它可能出現(xiàn)在這個元素之后（期望的），但也可能出現(xiàn)在這個元素的父元素活著祖先元素之后。這個方法還有一個問題，偽元素?zé)o法綁定獨(dú)立的JS事件處理函數(shù)。
具體做法就是生成一個巨大的投影，不偏移不模糊，簡單拙劣的模擬遮罩層效果：
為了確保遮罩層總是可以覆蓋視口，我們換用視口單位來解決它。因為我們無法分開制定的水平和垂直方向的直徑，所以這里最合適的視口單位為 vmax 。 1vmax 相當(dāng)于 1vw 和 1vh 兩者中較大值，因此滿足我們需求的最小值就是50vmax。由于投影是同時向四個方向擴(kuò)展的，這個遮罩層的最終尺寸將是100vmax加上元素本身的尺寸。
缺點(diǎn)： 如果頁面很長而為此擴(kuò)大投影的擴(kuò)張半徑就不太明智。
優(yōu)點(diǎn)：可以有限度的使用該技巧，比如配合固定定位來使用，或者當(dāng)頁面沒有滾動條時再用。
如果你想引導(dǎo)用戶關(guān)住的元素就是一個模擬的 dialog 元素，（ dialog 元素可以由它的 showModal() 方法顯示出來），那么根據(jù)瀏覽器的默認(rèn)樣式，它會自帶一個遮罩層。借助 ::backdrop 偽元素，這個原生的遮罩層可以設(shè)置樣式的，比如可以把它變的更暗一些：
缺點(diǎn)：瀏覽器對其支持比較有限，再次使用之前，確認(rèn)一下兼容性的問題。
優(yōu)點(diǎn)：盡管瀏覽器還不支持，對話框沒有遮罩層也不會導(dǎo)致任何功能的缺失，因為它只是用戶體驗的增強(qiáng)手段而已。
如何用css實(shí)現(xiàn)半透明遮罩層效果
z-index:2000; //使遮罩層在其他層之上
opacity:0.5; //透明度,取值范圍 0-1
css如何給圖片加一個蒙版遮罩
1．首先，看一下HTML，一個img圖像控件和一個帶有樣式的div，其中包含文本。這個就是蒙版遮罩層。
2．然后，查看樣式定義。先檢查圖像容器和圖像樣式，如圖所示。其中要注意的是img_container樣式里定義了position:relative，這個主要是為了遮罩層做絕對定位做準(zhǔn)備的。
3．接著，查看遮罩層的樣式定義。該代碼如圖所示。
背景：rgba（0，0，0，0．7）；
可以通過修改以下數(shù)字0．7來更改透明度。 1是完全不透明的，0是完全透明的。
4．隨后，添加用于鼠標(biāo)移動的腳本代碼以顯示遮罩層。該js代碼是用jquery編寫的，既方便又簡單，因此首先介紹jquery腳本庫。
5．然后，添加mouseover和mouseout事件，主要是當(dāng)鼠標(biāo)移到圖像容器時顯示遮罩層，并在鼠標(biāo)移出時隱藏遮罩層。
6．刷新頁面，可以看到頁面上顯示的普通圖片。
7．最后，可以看到當(dāng)鼠標(biāo)放在圖片上時，將顯示遮罩層。
css如何實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層及文字
1.首先看看HTML、一個img圖像控件和一個帶掩碼樣式的div，其中包含文本。這是蒙版層。
2.然后，查看樣式定義。首先，查看圖像容器和圖像的樣式，如圖所示。這主要是準(zhǔn)備我們的絕對定位口罩。
3.看看蒙版層的樣式定義。代碼如圖所示。
背景:rgba(0,0,0,0.7);
透明度可以通過修改后面的0.7號來改變。1是完全不透明的，0是完全透明的。
4.然后添加用于鼠標(biāo)移動的腳本代碼來顯示蒙版層。這段js代碼是用jquery編寫的，既方便又簡單，所以我們首先介紹jquery腳本庫。
5.添加mouseover和mouseout事件，主要是當(dāng)鼠標(biāo)移動到圖像容器上時顯示蒙版層，當(dāng)鼠標(biāo)移出時隱藏蒙版層。
6.刷新頁面，您可以看到頁面上顯示的正常圖片。
7.當(dāng)我們把鼠標(biāo)放在蒙版層上時，蒙版層就會顯示出來。
名稱欄目：css遮罩層樣式,圖片遮罩層濾鏡css
本文來源：http://www.dlmjj.cn/article/dsscjpc.html
