如何通過 HTML5 實現 iOS 7 的實時毛玻璃模糊效果

所謂的毛玻璃效果其實是半透明+模糊，可以用CSS filter實現。

創新互聯建站專業為企業提供日土網站建設、日土做網站、日土網站設計、日土網站制作等企業網站建設、網頁設計與制作、日土企業網站模板建站服務，十多年日土做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

時間不多，就拋個磚，題主可以自己找一下文檔和更多案例。

filter - CSS

div {

-moz-filter: blur(5px);

-webkit-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

}

大體思路是，當出現彈出層的時候，對背景層增加blur filter，再給彈出層的一定透明度就可以了。

因為有同學堅持說 CSS filter 只能用于圖片，所以錄了一個小視頻，證明它是可以用于可視的DOM元素的。

在 codepen 上找了一個栗子，是通過CSS filter + JS復制滾動元素實現的毛玻璃 Nav Bar 效果，也可以說明，這個屬性真的不是只能作用于圖片，也不需要“截屏”啊。

html5如何實現彈出提示框，并且伴隨遮罩層并且可以關閉彈出框

引入jQuery，寫好事件之后，核心代碼如下 $(".modal-content").slideUp(); //關閉層 $(".modal-content video#vd01").trigger("pause").hide(); //關閉視頻

html5開發手機app 如何實現遮罩層的效果

寫一個fixed定位的div，z-index稍微高一點，設置一下背景色和透明度就行

html遮罩層怎么只遮住一部分

遮罩層高度設置為100%;定位{position: fixed;z-index:11;background:rgba(0,0,0,0.6);height:100%;top:0;left:0;}

HTML實現遮罩層方法 HTML中如何使用遮罩層

最普遍的做法遮罩層默認display:none;需要彈出的場景display:block;關閉遮罩層display:none;

HTML中如何使用遮罩層

第一步：新建一個html頁面

頁面中先做出一個【領紅包】的按鈕，如圖（圖中左側是效果右側是代碼），點擊這個按鈕就會彈出一個紅包的活動消息，即我們要的遮罩效果

css遮罩層怎么做

css遮罩層怎么做

第二步：做出遮罩層

遮罩層的作用就是將層后面的內容都遮住，覆蓋全屏，所以：

寬高都設為：100%；

位置 position：absolute；left：0； top:0;

背景色 一般都設為透明的 background: rgba(0,0,0,0.5);

層的順序 z-index:100; (設置一個比較大的數值)

css遮罩層怎么做

第三步：做出遮罩層上的內容

1、在遮罩層上添加活動效果圖

2、關閉活動信息彈出框的【關閉】按鈕

注意:遮罩層上的內容也要添加上z-index且數值要比遮罩層的大，z-index:101

如圖（左側效果，右側代碼）

css遮罩層怎么做

css遮罩層怎么做

第四步：用js實現遮罩效果演示

首先我們看到的頁面上是沒有遮罩層的，只有一個【領紅包】的按鈕在頁面中；

然后我們點就【領紅包】按鈕，就彈出遮罩效果；再要關閉遮罩層時點擊右上角的關閉按鈕，就退出了遮罩成的活動信息。具體操作如下：

1、將遮罩層隱藏起來 display：none；

2、點擊【領紅包】時，遮罩層顯示 display：block;

3、點擊關閉按鈕，遮罩層消失 display：none；

如圖

css遮罩層怎么做

css遮罩層怎么做

css遮罩層怎么做

css遮罩層怎么做

css遮罩層怎么做