css透明opacity和濾鏡filter的準確用法

前提:除IE外,目前主流瀏覽器 Opera 9.0+,Safari 1.2(WebKit 125) +,chrome等等都支持opacity這個透明度屬性。

IE 從4.0版開始,就提供了一些內置的多媒體濾鏡特效,具體的使用方法是:
語法:

filter:filter
要使用的濾鏡效果,多個之間用空格分割

說明:使用該屬性時,必須具有height,width,position中的一個,在MAC平臺上不可用

支持以下14種濾鏡
Alpha 讓HTML元件呈現出透明的漸進效果
Blur 讓HTML元件產生風吹模糊的效果
Chroma 讓圖像中的某一顏色變成透明色
DropShadow 讓HTML元件有一個下落式的陰影
FlipH 讓HTML元件水平翻轉
FlipV 讓HTML元件垂直翻轉
Glow 在元件的周圍產生光暈而模糊的效果
Gray 把一個彩色的圖片變成黑白色
Invert 產生圖片的照片底片的效果
Light 在HTML元件上放置一個光影
Mask 利用另一個HTML元件在另一個元件上產生圖像的遮罩
Shadow 產生一個比較立體的陰影
Wave 讓HTML元件產生水平或是垂直方向上的波浪變形
XRay 產生HTML元件的輪廓,就像是照X光一樣

Alpha濾鏡參數詳解

Opacity 不透明的程度,百分比。 從0到100,0表是完全透明,100表示完全不透明。
FinishOpacity 這是一個同Opacity一起使用的選擇性的參數,當同時Opacity和FinishOpacity時,可以制作出透明漸進的效果,比較酷。 從0到100,0表是完全透明,100表示完全不透明。
Style 當同時設定了Opacity和finishOpacity產生透明漸進時,它主要是用赤指定漸進的顯示形狀。 0:沒有漸進;1:直線漸進;2:圓形漸進;3:矩形輻射。
StartX 漸進開始的 X 坐標值
StartY 漸進開始的 Y 坐標值
FinishX 漸進結束的 X 坐標值
FinishY 漸進結束的 Y 坐標值

H5支持透明背景顏色

background-color:rgba(0,152,50,0.7)
表示百分之七十的不透明度,而且支持rgba寫法,不支持16位
background-color:transparent;支持完全透明

#使用透明度+背景顏色或者背景圖片實現
background-color:rgb(0,152,50);
opacity:0.7
那么,問題來了,IE6-IE8完全不支持 opacity,所以還得考慮一下 IE的濾鏡
使用alpha通道來設計不透明通道
filter:alpha(opacity=70)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.CSS靜態濾鏡樣式 (filter)(只有IE4.0以上支持) CSS靜態濾鏡樣式的使用方法:{ filter...
    恩德_b0c2閱讀 748評論 0 1
  • CSS 濾鏡 CSS樣式表是一種為超文本標簽語言提供增強補充服務的技術,可對每一個html的標簽做精雕細刻的修飾。...
    阿甘筆記閱讀 559評論 0 1
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4 61
  • 四五年前,語言培訓行業興起四六級“包過”培訓班,這不是吹牛,而且成功率還不低。大概兩三年前,很多雅思培訓機構也開...
    鴨思博士閱讀 1,214評論 0 1
  • 跟UIApplication的中的idleTimerDisabled有關,官方描述如下: 因此只要在didFini...
    ProteanBear閱讀 8,966評論 0 1