div css彈出層半透明遮罩層效果實現

2021-06-18 08:02:40 字數 1068 閱讀 8878

背景半透明,覆蓋整個可視區域的遮罩層效果在工作中經常會遇到,這篇文章主要介紹了當內容超過一屏時如何做到多瀏覽器的相容性。 下面我們通過乙個簡單的例子看看如何實現,高手請繞道。

html**很簡單

1 、半透明效果可以使用 css3 中的 opacity 屬性,在低版本的ie瀏覽器中使用ie的alpha 濾鏡。**:

.opacity

2 、要覆蓋整個可視區域通常的做法是:

html,body

.mask

但是這樣做當內容超過一屏時只有ie6下顯示的效果是我們所期望的,在其他瀏覽器中首屏以下的沒能被遮蓋住,為了相容其他瀏覽器我們可以使用position:fixed; 來解決這個問題

完整的**:

html,body

.mask

.opacity

乙個實際的**例子:

place holder height:1000px;

這個效果效果在工作中經常會遇到,這篇文章主要介紹了當內容超過一屏時如何做到多瀏覽器的相容性。 下面我們通過乙個簡單的例子看看如何實現,高手請繞道。

html**很簡單 < d i v class="mask opacity">< / d i v >

1 、半透明效果可以使用 css3 中的 opacity 屬性,在低版本的ie瀏覽器中使用ie的alpha 濾鏡。**:

.opacity

2 、要覆蓋整個可視區域通常的做法是:

html,body

.mask

但是這樣做當內容超過一屏時只有ie6下顯示的效果是我們所期望的,在其他瀏覽器中首屏以下的沒能被遮蓋住,為了相容其他瀏覽器我們可以使用position:fixed;來解決這個問題

完整的**:

html,body

.mask

.opacity

背景半透明最佳實踐

垂直居中的幾種實現方法

div 高度100%

css彈出遮罩層

說明 需要jquery支援,支援ie8 googlechrome,firefox,話不多說,上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...

C Winform 實現自定義半透明遮罩層介紹

在網頁中通過div css實現半透明效果不難,今天我們看看一種在winfrom中實現的方法 效果圖如下,正常時 顯示遮罩層時 自定義遮罩層控制項的原始碼如下 view row code 1using system 2using system.drawing 3using system.windows...

C 實現Winform自定義半透明遮罩層

c 實現winform自定義半透明遮罩層 在網頁中通過div css實現半透明效果不難,今天我們看看一種在winfrom中實現的方法 效果圖如下,正常時 顯示遮罩層時 自定義遮罩層控制項的原始碼如下 using system using system.drawing using system.win...