div非彈出框半透明遮罩實現全螢幕遮蓋css實現

2022-01-11 17:33:46 字數 650 閱讀 3646

ie瀏覽器下設定元素css背景為透明:

background-color: rgb(0, 0, 0);  

filter: alpha(opacity=20);

非ie瀏覽器下設定元素css背景為透明:

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

相容各類瀏覽器設定css背景為透明辦法,即兩者合併設定css:

(ie 不支援 rgba,所以rgba不會起作用)

background-color: rgb(0, 0, 0);  

filter: alpha(opacity=20);

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

另:rgb與16進製制色互轉**:

1.彈出框預設狀態下是隱藏的,當點選彈出按鈕時,顯示該彈出框,如下:

<

div

class

="modal"

style

="display: none;">

2.控制彈出框顯示的遮罩層css(遮罩整個螢幕,即新增乙個灰色背景遮罩層)如下:

.modal

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

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

Qt實現半透明遮罩效果

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

div背景半透明,覆蓋整個可視區域的遮罩層效果

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