CSS改變圖片顏色的filter(濾鏡)屬性

前端一般處理圖片，我首先想到的就是ps。
但是，前端css的filter屬性一樣可以得到一些意想不到的效果（例如：圖片模糊與圖片飽和度）
今天我們就來挨個介紹一下這些取值產生的效果
也可以參考runoob

filter(濾鏡)

filter的取值有：none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none（默認值，沒有效果）

img{
  filter: none;
}

none的效果圖：

blur() (給圖像設置高斯模糊)

img{
  filter: blur(2px);
}

blur(0px-20px)與原圖的對比效果：

#brightness() (給圖片應用一種線性乘法，使其看起來更亮或更暗)

brightness(0%):全黑
brightness(100%):沒有變化
brightness(>100%):圖片變得更亮

img{
  filter: brightness(50%);
}

brightness(100%~0%)與原圖的對比效果：

contrast() (調整圖像的對比度)

contrast(0%):全灰
contrast(100%):沒有變化
contrast(>100%):圖片對比度更明顯

img{
  filter: contrast(50%);
}

contrast(100%~0%)與原圖的對比效果：

drop-shadow() (給圖像設置一個陰影效果)

這個取值類似於box-shadow
drop-shadow(h-shadow v-shadow blur spread color)
1、 (必須)
這是設置陰影偏移量的兩個 值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。查看可能的單位.
如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 and/or ，會有模糊效果).
2、 (可選)
.值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
3、 (可選)
正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
4、 (可選)
查看 該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。

img{
  filter: drop-shadow(2px 4px 6px #000);
}

drop-shadow(2px 4px 6px #000)的效果圖：

grayscale() (將圖像轉換為灰度圖像)

grayscale(0%):無變化
grayscale(100%):灰度圖片
grayscale(>100%):跟100%的效果一致

img{
  filter: grayscale(50%);
}

grayscale(0%~100%)與原圖的對比效果：

hue-rotate() (給圖像應用色相旋轉)

hue-rotate(0deg):無變化
hue-rotate(180deg):變化
hue-rotate(360deg):無變化
hue-rotate(361deg)的效果等同於hue-rotate(1deg)的效果
0~360deg為一個周期

img{
  filter: hue-rotate(50deg);
}

hue-rotate(0deg~360deg)與原圖的對比效果：

invert() (反轉輸入圖像)

invert(0%):無變化
invert(100%):完全反轉
invert(>100%):跟100%的效果一致

img{
  filter: invert(50%);
}

invert(0%~100%)與原圖的對比效果：

opacity() (轉化圖像的透明程度)

opacity(0%):完全透明
opacity(100%):無變化
opacity(>100%):跟100%的效果一致
該值類似與opacity屬性

img{
  filter: opacity(50%);
}

opacity(100%~0%)與原圖的對比效果：

saturate() (轉換圖像飽和度)

saturate(0%):完全不飽和
saturate(100%):無變化
saturate(>100%):更高的飽和度

img{
  filter: saturate(50%);
}

saturate(0%~200%)與原圖的對比效果：

sepia() (將圖像轉換為深褐色)

img{
  filter: sepia(0%);
}

sepia(0%~100%)與原圖的對比效果：

url() (URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。)

SVG濾鏡資源是指以xml文件格式定義的svg濾鏡效果集，可以通過URL引入並且通過錨點（#element-id）指定具體的一個濾鏡元素
用法：filter: url(svg-url#element-id)

svg-xml文件

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     baseProfile="full">
    <defs>
        <!-- 此處定義濾鏡 -->
        <filter id="blur">
            <feGaussianBlur stdDeviation="4" result="blur"/>  
            <!-- feGaussianBlur(濾鏡): 該濾鏡對輸入圖像進行高斯模糊 -->
            <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
            <!-- feOffset(模糊)：創建陰影效果 -->
        </filter>
    </defs>
</svg>

img{
  filter: url("./svg.xml#blur");
}

效果圖入下：

 

轉載:https://blog.csdn.net/lfz0719/article/details/100568078