之前在看七月老師的視頻的時候,看到了有一個樣式是 -webkit-filter ,不知道是什么(我沒咋學過CSS,嘿嘿,所以不知道是啥),于是查了一下,原來是濾鏡吖。但是在微信小程序里使用的時候,下面一直飄紅線,再仔細查了一下,原來是在 Chrome, Safari 中使用 -webkit-filter ,還有 -moz-filter (適配Firefox), -o-filter (適配Opera), -ms-filter (適配ie)而微信小程序里使用的話,使用 filter 就可以了。一時間好奇了下,就多試了幾個函數,以下是詳細的筆記
定義
filter 屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度)。
分類
none 默認值,沒有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 對比度 drop-shadow() 陰影 grayscale() 灰度 hue-rotate() 色相旋轉 invert() 反色 opacity() 透明度 saturate() 飽和度 sepia() 復古色 url() SVG濾鏡 復合函數 多個濾鏡組合使用使用
提示:濾鏡通常使用百分比 (如:75%), 當然也可以使用小數來表示 (如:0.75)。
blur
高斯模糊:blur(radius),給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果沒有設定值,則默認是0;這個參數可設置css長度值,但不接受百分比值。
filter: blur(18px);
 
brightness
亮度:給圖片應用一種線性乘法,使其看起來更亮或更暗。如果值是0%,圖像會全黑。值是100%,則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的,圖像會比原來更亮。如果沒有設定值,默認是1。
filter: brightness(70%);
 
contrast
對比度:調整圖像的對比度。值是0%的話,圖像會全黑。值是100%,圖像不變。值可以超過100%,意味著會運用更低的對比。若沒有設置值,默認是1。
filter: contrast(50%);
 
drop-shadow
給圖像設置一個陰影效果。陰影是合成在圖像下面,可以有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受 (在CSS3背景中定義)類型的值,除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似;不同之處在于,通過濾鏡,一些瀏覽器為了更好的性能會提供硬件加速。 參數如下:
(必須) 這是設置陰影偏移量的兩個 值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。查看可能的單位. 如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 and/or ,會有模糊效果). (可選) 這是第三個code>值. 值越大,越模糊,則陰影會變得更大更淡.不允許負值 若未設定,默認是0 (則陰影的邊界很銳利). (可選) 這是第四個 值. 正值會使陰影擴張和變大,負值會是陰影縮小.若未設定,默認是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度,如果加了也不會渲染。
新聞熱點
疑難解答