The CSS filter property applies visual effects to elements directly in CSS, with common uses including: 1. blur() for softening images or creating depth, 2. brightness() to adjust lightness or darkness, 3. contrast() to enhance or reduce visual distinction, 4. grayscale() for black-and-white conversions, 5. hue-rotate() to shift colors across the spectrum, 6. saturate() to intensify or mute顏色，7。將多個過濾器結(jié)合起來以進行復雜效果，8。用于形狀吸引的陰影的Drop-Shadow（）和9。通過過濾背景內(nèi)容進行玻璃塑料的背景更濾波器，所有這些都有效時，當明智地使用時，所有這些都是有效的，并且可以通過過渡和適當?shù)男阅芸紤]來增強。

CSS filter屬性用于將視覺效果（例如模糊，色移以及更多）應用于元素（通常是圖像），但在任何容器上都起作用。這是一個強大的工具，可增強UI而無需外部圖像編輯。

以下是一些常見且實用的例子：

1。模糊效應（ blur() ）

非常適合背景圖像或創(chuàng)建深度。

 .blurry {
  過濾器：Blur（5px）;
}

• 使用blur(0)無模糊，增加值（例如10px ）會產(chǎn)生更強的模糊。
• 通常用于模態(tài)背景或磨砂玻璃（與backdrop-filter結(jié)合使用）。

2。亮度調(diào)節(jié)（ brightness() ）

控制元素出現(xiàn)的光明。

 。明亮的 {
  過濾器：亮度（150％）；
}

.dim {
  過濾器：亮度（50％）；
}

• 100% =原始亮度。
• 值超過100%使其更明亮； 100%以下使它變得更黑。
• 對懸停效應有用：

   IMG：懸停{
    過濾器：亮度（120％）；
  }

3。對比控制（ contrast() ）

 。
  過濾器：對比（180％）；
}

.low-contrast {
  過濾器：對比（70％）；
}

• 調(diào)整光面積和黑暗區(qū)域之間的差異。
• 可以幫助提高具有文本覆蓋的圖像的可讀性。

4。灰度轉(zhuǎn)換（ grayscale() ）

 .grayscale-img {
  過濾器：灰度（100％）；
}

.partial-gray {
  過濾器：灰度（50％）；
}

• 100% =完全黑白； 0% =原始顏色。
• 對于懸停色的圖像畫廊而言，很受歡迎：

   img {
    過濾器：灰度（100％）；
    過渡：濾波器0.3s易于;
  }
  IMG：懸停{
    過濾器：灰度（0％）;
  }

5。色調(diào)旋轉(zhuǎn)（ hue-rotate() ）

 。
  過濾器：色相旋轉(zhuǎn)（90DEG）;
}

• 在色輪周圍旋轉(zhuǎn)顏色。
• 嘗試180deg以進行復古外觀，或?qū)ζ溥M行動畫：

   @keyframes colorcycle {
    來自{filter：hue-rotate（0deg）; }
    to {filter：hue-rotate（360deg）; }
  }
  。
    動畫：Colorcycle 3s無限線性；
  }

6。飽和（ saturate() ）

 .super-sat {
  過濾器：飽和（200％）；
}

。
  過濾器：飽和（30％）；
}

• 增加或降低顏色強度。
• 100% =正常；更高=更加生動；較低=靜音。

7。組合多個過濾器

您可以堆疊多個效果：

 。
  過濾器：對比度（120％）亮度（90％）飽和（150％）色調(diào)（15DEG）；
}

訂單通常沒關(guān)系，但是復雜的組合可能會因瀏覽器而略有不同。

8。落影（ drop-shadow() ）

與box-shadow不同，這遵循元素的形狀（包括透明度）：

 。陰影 {
  過濾器：DropShadow（2PX 2PX 4PX RGBA（0，0，0，0，0.5））;
}

• 用于具有透明背景的圖像（例如，PNG圖標）。
• 前三個值： offset-x ， offset-y ， blur-radius 。

9。使用backdrop-filter （獎金）

將過濾器應用于元素背后的區(qū)域（非常適合玻璃晶狀體）：

 。玻璃 {
  背景過濾器：Blur（10px）亮度（80％）；
  背景：RGBA（255、255、255、0.2）;
  邊界拉迪烏斯：12px;
  填充：20px;
}

注意： backdrop-filter對所有瀏覽器（尤其是較舊的瀏覽器）都不起作用。

快速提示：

• 性能：重量過濾器（例如大型模糊）會影響移動的性能。
• 后備：始終沒有過濾器測試 - 確保內(nèi)容仍然可用。
• 過渡：與transition相結(jié)合，從而使懸停效果平滑。

基本上， filter屬性是一種簡單而強大的方法，可以在CSS中調(diào)整視覺效果。大多數(shù)效果都是硬件加速的，因此明智地使用時效率是有效的。

以上是CSS過濾屬性示例的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！