css filter詳解
filter 屬性詳解
屬性 名稱 型別 說明 grayscale 灰度 值為數值 取值範圍從0到1的小數(包括0和1) sepia 褐色 值為數值 取值範圍從0到1的小數(包括0和1) saturate 飽和度 值為數值 預設是1，可以是小於1的小數，也可以大於1 hue-rotate 色相旋轉 值為角度 0-360deg invert 反色 值為數值 取值範圍從0到1的小數(包括0和1) /*IE10*/ opacity 透明度 值為數值 取值範圍從0到1的小數(包括0和1) brightness 亮度 值為數值 預設是1，可以小於1(變暗)，可以大於1(變亮) contrast 對比度 值為數字 預設是1，可以大於1，也可以小於1 blur 模糊 值為length 表示模糊半徑，比如filter:blur(2px)/*IE10*/ drop-shadow 陰影 值為shadow() 寫法類似css3 box-shadow，比如filter:drop-shadow(0,0,10px,black) 特別說明： 火狐、opera瀏覽器不支援filter屬性
所以在寫定義常用屬性的時候如：半透明屬性：opacity，則可以直接定義成opacity:.5;/*Opera9.0+、Firefox1.5+、Safari、Chrome*/
另外ie6也有特定的png圖片定義方式：background:url(../images/yz.png) center bottom no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale,
src=”images/yz.png”);_background:none;
IE透明定義方式filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/
1.grayscale
div .f_grayscale { filter: grayscale(50%); -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -ms-filter: grayscale(50%); -o-filter: grayscale(50%); }
2.sepia
div .f_sepia { filter:sepia(0.1); -webkit-filter:sepia(0.1); -moz-filter:sepia(0.9); -ms-filter:sepia(0.9); -o-filter:sepia(0.9); }
3.saturate
div .f_saturate{ filter:saturate(125); -webkit-filter:saturate(3); -moz-filter:saturate(3); -ms-filter:saturate(3); -o-filter:saturate(3); }
4.hue-rotate
div .f_hue-rotate{ filter:hue-rotate(300deg); -webkit-filter:hue-rotate(300deg); -moz-filter:hue-rotate(50deg); -ms-filter:hue-rotate(50deg); -o-filter:hue-rotate(50deg); }
5.invert
<pre name="code" class="html">div .f_invert{ filter:invert(.3); -webkit-filter:invert(.3); -moz-filter:invert(.3); -ms-filter:invert(.3); -o-filter:invert(.3); }
6.opacity
</pre></blockquote><pre name="code" class="html">div .f_opacity{ filter:opacity(.5); -webkit-filter:opacity(.5); -moz-filter:opacity(.5); -ms-filter:opacity(.5); -o-filter:opacity(.5); }
7.brightness大於1的情況
</pre></blockquote><pre name="code" class="html">div .f_brightness{ filter:brightness(5); -webkit-filter:brightness(5); -moz-filter:brightness(1.3); -ms-filter:brightness(1.3); -o-filter:brightness(1.3); }8.brightness小於1的情況
div .f_brightness{ filter:brightness(.3); -webkit-filter:brightness(.3); -moz-filter:brightness(.3); -ms-filter:brightness(.3); -o-filter:brightness(.3); }9.contrast大於1
div .f_contrast{ filter:contrast(2); -webkit-filter:contrast(2); -moz-filter:contrast(2); -ms-filter:contrast(2); -o-filter:contrast(2); }10.contrast小於1
div .f_contrast{ filter:contrast(.2); -webkit-filter:contrast(.2); -moz-filter:contrast(.2); -ms-filter:contrast(.2); -o-filter:contrast(.2); }11.blur
div .f_blur{ filter:blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(2px); -ms-filter:blur(2px); -o-filter:blur(2px); }12.drop-shadow
div .f_shadow{ filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5)); -webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1)); -moz-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5)); -ms-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5)); -o-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5)); }
要實現（比方說）FireFox 24瀏覽器上照片變模糊的效果，也是可以的。可以使用SVG的模糊濾鏡。
新建文命名為blur.svg的SVG檔案：
01<?xmlversion="1.0"encoding="utf-8"?>
02<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
03<svgversion="1.1"
04xmlns="http://www.w3.org/2000/svg"
05xmlns:xlink="http://www.w3.org/1999/xlink"
06xmlns:ev="http://www.w3.org/2001/xml-events"
07baseProfile=相關推薦
css filter詳解
filter 屬性詳解 屬性 名稱 型別 說明 grayscale 灰度 值為數值 取值範圍從0到1的小數(包括0和1) sepia 褐色 值為數值
es6 map()和filter()詳解【轉】
低版本 window get 簡約 push foreach 沒有 數值 length 原文地址：http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e
Servlet中的過濾器Filter詳解
rep 釋放 ons smo text 執行c 總結 throws 程序啟動 轉自： http://blog.csdn.net/sd0902/article/details/8395641 web.xml中元素執行的順序listener->filter->str
UI自動化測試（二）瀏覽器操作及對元素的定位方法（xpath定位和css定位詳解）
cli 刷新 ota api enter 版本 ror apache 窗口 Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera
CSS UNIT 詳解以及最佳實踐
not media 上下 打印機 -s pac post borde unit 分類 ■ 絕對長度（Absolute units）：cm,mm,in,pt,pc 絕對單位之間的換算：1in = 2.54cm=25.4mm=72pt=6pc 絕對長度在css中的
css屬性詳解
borde 控制 float 有趣 外邊距 cos 不起作用 普通 多個 一、字體屬性 字體 font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別
帶你走進CSS定位詳解
自身 length 技術 osi 設置 col 移動位置 str left 學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎麽用，下面整理了一下關於定位屬性的具體理解和應用方案。 一：定位 定位屬性列表 position to
Grunt學習筆記【3】---- filter詳解
add 行處理 class 一個 特殊 col filter詳解 很多 https 本文主要講配置任務中的filter，包括使用默認fs.Stats方法名和自定義過濾函數。 通過設置filter屬性可以實現一些特殊處理邏輯。例如：要清理某個文件夾下的所有空文件夾，這時使用c
CSS position詳解
1.首先必須說明的，是瀏覽器渲染DOM的原理。瀏覽器根據html中的順序依次渲染，對文字圖片等進行分塊，一個塊接一個塊渲染。 2.接下來，要說明的是，可以設定塊的大小。 3.然後看一下position， position屬性有四個值，static、rela
css 居中詳解（轉）
css菜鳥學習之text-align屬性，行內元素，塊級元素居中詳解 一.text-align屬性 1.text-align用來設定元素中的的文字對齊方式，例如：如果需要設定圖片的對齊方式，需要設定圖片的父元素的text-align屬性； 2.text-align只對文字有效，對元素無效
DW中CSS屬性詳解
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
.CSS定位詳解
CSS定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。但是卻能夠形成豐富的表現。 一、相對定位：relative 相對定位是相對於自身定位的元素進行定位的，它的參照物就是本身。 還有一
CSS---display詳解
inline 常用的inline就是文字和圖片，其實inline真沒什麼好說的，大家可以把它想象成一個杯子裡的水，它是“流”，是沒有大小和形狀的，它的寬度取決於父容器的寬度。 因此，針對inline的標籤，你設定寬度和高度是無效的，通過監控可以知道，該元素實際的寬度和高度都是auto，
Hbase的Filter詳解使用
轉載: https://blog.csdn.net/lr131425/article/details/72676254 引數基礎 有兩個引數類在各類Filter中經常出現，統一介紹下： （1）比較運算子 CompareFilter.CompareOp 比較運算子用於定義比較關
Java過濾器Filter詳解
一、過濾器的定義： 過濾器是處於客戶端與伺服器資原始檔之間的一道過濾網，在訪問資原始檔之前，通過一系列的過濾器對請求進行修改、判斷等，把不符合規則的請求在中途攔截或修改。也可以對響應進行過濾，攔截或修改響應。 如圖，瀏覽器發出的請求先遞交給第一個filter進行過濾，符合規則則放行
CSS例項詳解：Flex佈局
本文由雲+社群發表 本文將通過三個簡單的例項，實際應用上篇文章的基礎理論知識，展示下Flex佈局是如何解決CSS佈局問題。 一．垂直居中 這裡同時用非flex佈局和flex佈局兩種方式來實現，可以對比兩種實現方式的差異。 1.1用margin實現垂直居中 實現方式： 父元素採用相對定位，
css樣式詳解及覆蓋順序
覆蓋順序 根據權重值，載入如下：瀏覽器預設值<外部樣式<內部樣式<內聯樣式。權重小的被權重大的覆蓋。 但是，需要考慮一種情況，如在外部樣式表中在id選擇器和類選擇器中都定義了元素的顏色，那應該怎麼辦？或者在一個元素的多個class中均設定了不
Hbase中內建Filter詳解
一、建表 1、表名：“ORDER_TABLE” 2、列簇：“user”，“order”，“item” 3、表結構如下： 二、封裝服務 服務程式碼如下： @Override public String get(String tableName, Filter filte
spring cloud-zuul的Filter詳解
關於閘道器的作用，這裡就不再次贅述了，我們今天的重點是zuul的Filter。通過Filter，我們可以實現安全控制，比如，只有請求引數中有使用者名稱和密碼的客戶端才能訪問服務端的資源。那麼如何來實現Filter了？ 要想實現Filter，需要以下幾個步驟： 1、繼承Zu
CSS定位詳解
static：物件遵循正常文件流，top、right、bottom、left等屬性無效。absolute：物件脫離正常文件流，使用left、right、top、bottom等屬性進行定位，其層疊可通過css z-index屬性定義，此時物件不具有margin邊距，但仍有補白和邊框border。absoulte
