html通過css來設定半透明背景

2021-07-10 06:12:29 字數 1820 閱讀 4260

html/css標籤透明度效果的實現,在html中,實現半透明背景,在html div+css程式設計中,為了實現版透明,通常有3中做法。

第一種是html5的透明,在h5中支援透明背景顏色,但遺憾的是,h5中的辦透明背景顏色只支援 rgba的寫法,不支援16進製制的寫法 如:

background-color:rgba(0,152,50,0.7);// -->70%的不透明度

background-color:transparent;支援完全透明

在傳統瀏覽器中,ie瀏覽器的獨特性也是某些透明度設定的不確定性因素

一般來說,firefox和webkit,khtml陣營中實現透明的方式非常簡單,也包括ie9+及大於ie9的瀏覽器使用上述html5設定透明。

第二種是使用半透明粒子,圖案或者漸變半透明png,這種方法是相容性相容性的,除了ie6需要使用外掛程式來修改png不透明的bug外,

支援性非常好,設定可以重複,還可以定位,在h5中也可以設定大小,不過在網頁中追求極致的話載入越少越好。

(粒子:透明度勻稱的裁剪至5px * 5px以下,這樣載入速度要快的多)

第三種方式是使用透明度+背景顏色或者背景來實現。

那麼,問題來了,ie6-ie8完全不支援 opacity,所以還得考慮一下 ie的濾鏡

ie中有很多濾鏡,其中使用alpha通道來設定不透明度

filter:(opactity=70)
?

因此上述方案改造如下

注意:opacity或者alpha的值強調的是「不」透明度

推薦使用第三種方案

filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;

CSS如何設定div半透明效果

css如何設定div半透明效果 設定元素的透明度在很多應用中都有使用,下面就介紹一下如何設定乙個元素為半透明,其他的透明效果自己衍伸就可以了。例項如下 opacity屬性所以標準瀏覽器都支援,但是ie8和ie8以下瀏覽器不支援此屬性,於是就使用filter alpha opacity 50 進行相容...

css實現半透明設定 Day11

半透明設定雖然簡單,但是它的應用卻是屢見不鮮,而且一旦用在了恰當的地方,會給網頁增色不少,所以我單獨將它拿出來做了一篇單獨的介紹 1 實現效果 應用舉例 京東 中 蘑菇街中 等等很多頁面中都存在半透明效果的模組,現在我們來看一下它的基本原理 2 實現 這個 實現如果之前你沒有看過,到了這裡看完你一定...

Android設定透明 半透明等效果

android 窗體透明的,黑暗度等的設定技巧 設定透明度 這是窗體本身的透明度,非背景 windowmanager.layoutparams lp getwindow getattributes lp.alpha 0.3f getwindow setattributes lp alpha在0.0f...