CSS過濾器

如何使用CSSfilter財產

過濾器使我們可以對元素執行操作。

您通常使用Photoshop或其他照片編輯軟件執行的操作,例如更改不透明度或亮度等等。

您使用filter財產。這是將其應用於圖像的示例,但是可以在任何元素:

img {
  filter: <something>;
}

您可以在此處使用各種值:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url()

請注意每個選項後的括號,因為它們都需要一個參數。

例如:

img {
  filter: opacity(0.5);
}

表示圖像將是50%透明的,因為opacity()取0到1之間的一個值或一個百分比。

您還可以一次應用多個過濾器:

img {
  filter: opacity(0.5) blur(2px);
}

現在讓我們詳細討論每個過濾器。

blur()

模糊元素內容。您傳遞給它一個值,表示為px或者em或者rem將用於確定模糊半徑。

例子:

img {
  filter: blur(4px);
}

opacity()

opacity()取0到1之間的一個值或一個百分比,然後根據該值確定圖像透明度。

0, 或者0%,表示完全透明。1, 或者100%或更高,表示完全可見。

例子:

img {
  filter: opacity(0.5);
}

CSS也有一個opacity財產。filter但是,根據實現的不同,可以通過硬件加速,因此這應該是首選方法。

drop-shadow()

drop-shadow()在元素後面顯示陰影,該陰影跟隨alpha通道。這意味著,如果您有透明圖像,則會將陰影應用於圖像形狀,而不是圖像框。如果圖像沒有Alpha通道,則陰影將應用於整個圖像框。

它接受最少2個參數,最多5個:

  • 偏移x設置水平偏移量。可以為負。
  • 偏移量設置垂直偏移量。可以為負。
  • 半徑模糊(可選)設置陰影的模糊半徑。默認為0,無模糊。
  • 擴散半徑(可選)設置展開半徑。表示為pxrem或者em
  • 顏色(可選)設置陰影的顏色。

您可以設置顏色而無需設置擴展半徑或模糊半徑。 CSS知道該值是顏色而不是長度值。

例子:

img {
  filter: drop-shadow(10px 10px 5px orange);
}
img {
  filter: drop-shadow(10px 10px orange);
}
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

使元素具有灰色。

您從0到1,或從0%到100%傳遞一個值,其中1和100%表示完全灰色,0或0%表示未觸摸圖像,並且保留了原始顏色。

例子:

img {
  filter: grayscale(50%);
}

sepia()

使元素具有棕褐色的顏色。

您從0到1,或從0%到100%傳遞一個值,其中1和100%表示完全棕褐色,0或0%表示未觸摸圖像,並且保留了原始顏色。

例子:

img {
  filter: sepia(50%);
}

invert()

反轉元素的顏色。反轉顏色意味著在HSL色輪中查找與顏色相反的顏色。如果您不知道那是什麼意思,只需在Google中搜索“色輪”即可。例如,黃色的反面是藍色,紅色的反面是青色。每一種顏色都有相反的含義。

您傳遞一個從0到1或從0%到100%的數字,該數字確定反轉的數量。 1或100%表示完全反轉,0或0%表示沒有反轉。

0.5或50%始終會呈現50%的灰色,因為您總是在轉輪中間。

例子:

img {
  filter: invert(50%);
}

hue-rotate()

HSL色輪以度表示。使用hue-rotate()您可以使用正向或負向旋轉顏色。

該函數接受一個deg價值。

例子:

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

brightness()

更改元素的亮度。

0或0%表示總的黑色元素。 1或100%給出的圖像不變

高於1或100%的值可使圖像更亮直至達到總的白色元素。

例子:

img {
  filter: brightness(50%);
}

contrast()

更改元素的對比度。

0或0%給出總的灰色元素。 1或100%給出的圖像不變

高於1或100%的值會提供更大的對比度。

例子:

img {
  filter: contrast(150%);
}

saturate()

更改元素的飽和度。

0或0%給出總的灰度元素(飽和度較小)。 1或100%給出的圖像不變

高於1或100%的值會給出更多的飽和度。

例子:

img {
  filter: saturate();
}

url()

該過濾器允許應用在SVG文件中定義的過濾器。您指向SVG文件位置。

例子:

img {
  filter: url(filter.svg);
}

SVG過濾器不在本書的討論範圍內,但是您可以在Smashing Magazine的這篇文章中閱讀更多內容:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

免費下載我的CSS手冊


更多CSS教程: