CSS過濾器效果：CSS中的模糊，灰度，亮度等！

> CSS過濾器：圖像操作的綜合指南

CSS濾波器效果的

>> 最初是SVG規範的一部分，

> CSS過濾器提供了一種強大且用戶友好的方法來操縱圖像渲染。 這些現在已集成到CSS中的過濾器可以使模糊，亮度，飽和調整等等。 它們可以單獨或組合使用，從而提供多功能的視覺效果。 基本語法很簡單：

>讓我們探索關鍵過濾器：

filter: <filter-function> [<filter-function>]* | none;

密鑰概念：

> css濾波器在顯示前修改元素渲染

，提供有效的圖像操作。 它們擁有廣泛的瀏覽器支持並促進各種效果（模糊，亮度，對比度，落下，灰度，灰度，色調，旋轉，反轉，不透明度，飽和，棕褐色）。

>
• 過濾器可以組合和動畫，以進行動態視覺效果。 申請順序會影響最終結果，有些過濾器可能會覆蓋其他濾鏡。 它們適用於各種元素，包括圖像，視頻和iframe。 > 雖然通常性能，但如果沒有硬件加速度，過濾器可能會較慢。
濾波器性能取決於應用的SVG濾波器。 主要的瀏覽器支持
• 屬性，但是Internet Explorer是一個例外。
• blur單個濾波器功能： url() filter

亮度：控製圖像亮度。 接受值≥0; 0％是黑色，100％是原始的，值＆gt; 100％增加亮度。

• 對比度：調整圖像對比度。 值≥0; 0％導致灰度圖像，100％是原始圖像，較高的值增加對比度。 filter: brightness(300%);

• >灰度：將圖像轉換為灰度。 值範圍從0％（無效）到100％（完全灰度）。 filter: contrast(0%);

• 飽和：控制顏色飽和。 0％去除所有顏色，100％是原始顏色，並且值＆gt; 100％過飽和。 filter: grayscale(100%);

• 棕褐色：應用棕褐色音。 0％是原始的，100％是完全棕褐色。 filter: saturate(0%);

• 色調rotate：旋轉圖像色調。 0deg沒有改變；值＆gt; 360DEG環繞。 filter: sepia(100%);

• 倒置：反轉圖像顏色。 0％沒有效果，100％完全反轉。 filter: hue-rotate(90deg);

• 模糊：應用高斯模糊。 半徑（以像素為單位）決定了模糊強度。 filter: invert(100%);

• 不透明度：控制透明度。 0％是完全透明的，100％不透明。 filter: opacity(75%);

• >滴陰影：添加了一個落下陰影。 需要X和Y偏移，顏色和可選的半徑模糊。 filter: drop-shadow(5px 5px 10px #666);

• url（）：允許使用自定義SVG過濾器。 引用SVG過濾器的ID。 性能根據SVG濾波器而變化。 >

組合和動畫過濾器

：>

可以組合多個過濾器；訂單很重要，因為某些過濾器覆蓋了其他過濾。 動畫使用CSS過渡或動畫創建動態效果。

附加說明：>

過濾器會影響元素的所有部分（背景，邊界，文本）。 它們可以應用於視頻和iFrame。 性能通常很好，除了

（無硬件加速度）和blur（取決於SVG濾波器）。 瀏覽器支持非常出色，不包括Internet Explorer。 url()

>常見問題：

本節將包括對原始文本中提供的常見問題解答的答案，以清晰和簡潔。 由於太空的限制，我將在這裡省略它們，但它們將是最終精打細算的文章的寶貴補充。

以上是CSS過濾器效果：CSS中的模糊，灰度，亮度等！的詳細內容。更多資訊請關注PHP中文網其他相關文章！