背景半透明覆蓋整個可視區域

2021-06-27 00:58:35 字數 548 閱讀 6016

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

背景半透明

css中在希望半透明的部分後面新增如下 filter alpha opacity 10 moz opacity 1 opacity 0.1 句中的數字就是你希望半透明的程度,越小透明度越高。其實就是新增乙個濾鏡。三句話中第乙個是支援ie,第二個和第三個都是支援firefox的不同版本。比如說設定好背...

背景半透明效果

背景為紅色 ff0000 透明度20 css example source code alpha1 ap2 這樣基本就可以實現啦,也不用擔心定位和自適應問題,最大的問題是僅ie支援。如果相容ff op怎麼寫呢?首先,上面這種定法是不行的啦,那就只能用兩個層重疊的方法啦。改下頁面結構與css樣式 ht...

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

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