使用DIV實現頁面的遮罩效果

2022-08-22 21:39:11 字數 521 閱讀 1493

之前沒動手搞過,專案有個需求剛好可以用到,就想著去試下,結果發現自己都理解的有問題了。

遮罩的實現是使用opacity或者ie下的filter濾鏡來設定透明度的,而且乙個div必須要設定乙個背景色,不然看不到效果,

通常的模態窗是使用毛玻璃效果來實現的

毛玻璃的示例**,相容瀏覽器

background-color: rgba(0,0,0,0.3);

-webkit-filter: blur(2px);

-moz-filter: blur(2px);

-ms-filter: blur(2px);

-o-filter: blur(2px);

filter: blur(2px);

遮罩的示例**

-moz-opacity: 0.8; //火狐的舊版

opacity:.80; //當前主流瀏覽器的新版

filter: alpha(opacity=80); //ie的舊版

//還有opera和safri沒列出,網上都有,需要再查

Shader Shader實現頭像遮罩效果

在unity中有個mask遮罩逐漸,使用這個元件也可以實現遮罩效果 但是我在使用unity自帶的圓形時候效果如下 必須加入才能實現透明效果 zwrite off blend srcalpha oneminussrcalpha cgprogram include unitycg.cginc inclu...

Qt實現半透明遮罩效果

本文索引我們在顯示一些模態對話方塊的時候,往往需要將對話方塊的背景顏色調暗以達到突出當前對話方塊的效果,例如 對話方塊的父視窗除了標題欄以外的部分都變暗了,在父視窗的對比下對話方塊的顯示效果就得到了強調。這種設計多見於web頁面,當使用者點選諸如購買之類的按鈕後頁面會彈出乙個購物清單確認對話方塊,並...

DIV拖動效果實現

在這裡謝謝jquery開發者得八輩兒祖宗啊。是他讓編寫js如此之簡單,不廢話了。寫 走著。兄弟記住要引用jquery。下面是實現拖動的核心 想用copy到你那裡,你懂得。function fn.jqresize function h jqdnr e 0,drag function v else e....