簡單,常用,基礎的css濾鏡效果

2021-09-30 01:12:59 字數 1976 閱讀 6833

第一次寫部落格,有些緊張。如寫的不好,盡請諒解!  2019-10-28  09:33:48

第一:透明度濾鏡

該濾鏡的效果其實跟調整透明度差不多。它總共有7個引數!語法如下!(擯棄那些花裡胡哨,我們只需要第乙個引數就行了!)

filter:alpha(opacity=不透明度,finishopacity=結束時不透明度,style=形狀特徵,startx=開始橫座標,starty=開始縱座標,finish=x=結束橫座標,finishy=結束縱座標);

在這裡解釋一下:style有4個引數:數值為0時表示勻速漸進,數值為1時表示線性漸進,為2時表示放射漸進,為3時表示直角漸進。

案例:filter:alpha(opacity=0.4)

第二:模糊濾鏡

該濾鏡的效果就是對**進行模糊。它總共有1個引數!語法如下!

filter:blur(模糊程度);引數為畫素,在0-10px之間,大於10px就沒效果,0px和10px時模糊程度為0,在1-9px數值越大模糊程度越大!

案例:filter:blur(3px);

第三:灰度濾鏡

該濾鏡的效果就是對**進行灰度調整,使其看起來像回憶照的效果。它總共有1個引數!語法如下!

filter:grayscale(灰度大小);引數為0-1或者0%-100%之間.引數值越大,灰度值越大!

案例:filter:grayscale(0.4);

第四:sepia(褐色)濾鏡

該濾鏡的效果就是對**進行褐色程度調整,使其看起來像老**。它總共有1個引數!語法如下!

filter:sepia(褐色程度大小);引數為0-1或者0%-100%之間.引數值越大,褐色值值越大!

案例:filter:sepia(1);

第五:brightness(亮度)濾鏡

該濾鏡的效果就是對**進行光亮程度調整。它總共有1個引數!語法如下!

filter:brightness(亮度大小);它的引數分為幾部分,0-1或0%-100%之間是在原圖的基礎上暗沉,數值越小,越暗,0時全黑;2-10之間是在原圖的基礎上調高亮度,10時全白!

案例:filter:brightness(2);

第六:hue-rotate(色相)濾鏡

該濾鏡的效果就是對**調整色相。它總共有1個引數!語法如下!

filter:hue-rotate(色相角度)。它的引數為任何角度,具體什麼角度什麼色調我說不清,大家可以去實踐了解

案例:filter:hue-rotate(300deg);

第七:invert(反色)濾鏡

該濾鏡的效果就是對**反色調整。它總共有1個引數!語法如下!

filter:invert(反色引數)。它的引數為0-1或0%-100%之間。

案例:filter:invert(1);

第八:saturate(飽和度)濾鏡

該濾鏡的效果就是對**飽和度調整。它總共有1個引數!語法如下!

filter:saturate(飽和度)。它的引數為0-1或1-10,0-1表示飽和度在原有的基礎上降低,數值越小,越低,為1飽和度與原**相等。1-10表示飽和度在原有的基礎上增加,數值越高,飽和度越大,10封頂。

案例:filter:saturate(2);

第九:contrast(對比度)濾鏡

該濾鏡的效果就是對**對比度進行調整。它總共有1個引數!語法如下!

filter:contrast(對比度值)。它的引數為0-1或1-10之間,和飽和度的原理差不多。

案例:filter:contrast(4);

第十:drop-shadow(陰影)濾鏡

該濾鏡的效果就是對**反色調整。它總共有1個引數!語法如下!

filter:drop-shadow(橫軸陰影大小   縱軸陰影大小   模糊半徑   陰影顏色)。

案例:filter:drop-shadow(10px 10px 100px black);

最後,筆者希望大家都能在我的這篇部落格中獲得自己想要的知識點,多謝**哪!

若還有什麼疑慮的地方,可以參考菜鳥教程。

CSS的濾鏡效果 1

能 濾鏡.濾鏡可以針對圖形或者文本來增添一些效果.如果在搭配之前所寫的定位以及文字的性質.可以在不使用圖檔的情況下.讓網頁有很棒的效果,而且瀏覽又快速.css的濾鏡大概有14種.較常以套用在 等卷標上 先介紹幾種濾鏡 alpha 濾鏡 設定性質 opacity 透明度 開始 0 100 finish...

css3 濾鏡效果

色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎?現在好了,你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑,可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果,而50deg會相應的轉動撥盤。在這種情況下,nettuts 的標誌將採...

LUT實現簡單濾鏡效果

1.大部分濾鏡是通過基礎的 對比度 色溫等 配合濾鏡演算法生成的一種色彩模式 2.上述演算法在遊戲處理中複雜度很高,所以我們一些簡單的色彩濾鏡效果可以使用lut的方式 lut look up table 指的是 顏色查詢表 是原始顏色通過lut的顏色查詢表對映到新的色彩上去。是單獨針對色彩空間的一種...