是的，您可以將CSS過(guò)濾器效應(yīng)應(yīng)用於圖像和元素。 CSS濾波器屬性允許使用簡(jiǎn)單的語(yǔ)法（例如過(guò)濾器：亮度（50％）），既單獨(dú)或組合），既可以單獨(dú)或組合），以施加模糊，亮度，對(duì)比度，灰度，色調(diào)，不透明度，飽和度和棕褐色的視覺(jué)效果；或過(guò)濾器：灰度（50％）模糊（2px）;。過(guò)濾器可用於圖像懸停效果，加載狀態(tài)，縮略圖和SVG圖標(biāo)，並通過(guò)CSS過(guò)渡可以平穩(wěn)過(guò)渡。但是，性能考慮因素包括潛在的GPU加速度和低端設(shè)備上的滯後，尤其是在動(dòng)畫(huà)過(guò)濾器的情況下，而瀏覽器支持在現(xiàn)代瀏覽器中卻廣泛，但可能需要供應(yīng)商前綴的較舊版本，而父母過(guò)濾器不會(huì)因佈局依賴(lài)性而均勻地影響子女元素。

是的，您絕對(duì)可以將CSS filter效應(yīng)應(yīng)用於圖像和其他元素 - 這是直接在瀏覽器中調(diào)整視覺(jué)效果而無(wú)需圖像編輯軟件的有力方法。 filter屬性使您可以單獨(dú)或組合使用視覺(jué)效果，例如模糊，亮度，對(duì)比度等。

這是有效使用它們的方法。

如何使用CSS過(guò)濾屬性

應(yīng)用過(guò)濾器的基本語(yǔ)法很簡(jiǎn)單。您只需將filter屬性添加到CSS選擇器中：

 .SELECTOR {
  過(guò)濾器：亮度（50％）；
}

您可以將過(guò)濾器應(yīng)用於圖像，Divs，SVG，甚至視頻。它可以在現(xiàn)代瀏覽器上使用，儘管較舊的版本（例如IE）可能無(wú)法完全支持它。

一些常見(jiàn)的過(guò)濾功能包括：

• blur(px)
• brightness(%)
• contrast(%)
• grayscale(%)
• hue-rotate(deg)
• opacity(%)
• saturate(%)
• sepia(%)

您也可以通過(guò)將多個(gè)過(guò)濾器與空間分開(kāi)來(lái)結(jié)合多個(gè)過(guò)濾器：

過(guò)濾器：灰度（50％）模糊（2px）;

只要記住，對(duì)於大多數(shù)過(guò)濾器而言，順序並不重要，但是某些組合（例如色相旋轉(zhuǎn)，然後是飽和度）可能會(huì)取決於序列，結(jié)果可能會(huì)略有不同。

何時(shí)使用過(guò)濾器：實(shí)際用例

在許多設(shè)計(jì)方案中，過(guò)濾器很方便。以下是一些現(xiàn)實(shí)世界的應(yīng)用程序：

• 圖像懸停效果- 通過(guò)更改懸停在對(duì)比度或亮度來(lái)使圖像彈出。
• 加載狀態(tài)- 應(yīng)用模糊或灰度過(guò)濾器，指示已加載或禁用的東西。
• 縮略圖- 使用一致的過(guò)濾器以相同的方式快速樣式所有縮略圖。
• SVG圖標(biāo)- 調(diào)整單色SVG的顏色或?qū)Ρ榷龋鵁o(wú)需多個(gè)文件。

例如，如果您想使圖像看起來(lái)褪色，直到有人徘徊在上面：

 img {
  過(guò)濾器：灰度（100％）；
  過(guò)渡：濾波器0.3；
}

IMG：懸停{
  過(guò)濾器：灰度（0％）;
}

這會(huì)產(chǎn)生平穩(wěn)的效果，而無(wú)需額外的資產(chǎn)。

性能和瀏??覽器支持註釋

雖然過(guò)濾器很棒，但它們確實(shí)提出了一些警告。

首先，性能：可以將過(guò)濾器gpu加速，這很好，但是很大的使用 - 尤其是在動(dòng)畫(huà)中 - 可能會(huì)導(dǎo)致低端設(shè)備上的滯後。除非您針對(duì)高端顯示屏，否則避免對(duì)像Blur這樣的複雜過(guò)濾器進(jìn)行動(dòng)畫(huà)化。

其次，瀏覽器兼容性：大多數(shù)現(xiàn)代瀏覽器都支持標(biāo)準(zhǔn)filter屬性，但是如果您支持非常舊的瀏覽器（例如Safari 5或IE），則需要使用供應(yīng)商前綴或接受後備行為。

另外，請(qǐng)注意，應(yīng)用於父元素的過(guò)濾器不會(huì)統(tǒng)一影響子元素 - 它們?cè)趤丫轴崾褂?，因此定位和堆疊上下文的上下文很重要。

基本上就是這樣。 CSS過(guò)濾器靈活，易於使用，並在瀏覽器中打開(kāi)許多創(chuàng)意可能性。只需記住要跨設(shè)備測(cè)試，並出於性能原因避免過(guò)度使用。

以上是將CSS濾波器效應(yīng)應(yīng)用於圖像和元素的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！