使用CSS濾鏡可動態(tài)調(diào)整圖像顏色；2. hue-rotate()可改變色相，實現(xiàn)色彩偏移；3. grayscale()可去除或部分保留顏色，常用於懸停效果；4. sepia()結(jié)合saturate()可創(chuàng)建復(fù)古效果；5. invert()適用於暗黑模式，但需注意色彩失真；6. 通過brightness(0)與hue-rotate()組合可模擬單色著色；7. 多個濾鏡可疊加使用，順序影響視覺效果；8. 濾鏡性能良好但應(yīng)避免過度使用，建議配合transition實現(xiàn)平滑動畫，最終可通過SVG或canvas實現(xiàn)更精確的色彩替換，該方法適用於主題切換與交互設(shè)計。

You can use CSS filter property to change the appearance of images, including their colors, without needing to edit the image file itself. This is especially useful for creating hover effects, dark mode adjustments, or dynamic UI changes. Here's how you can manipulate image colors using CSS filters.

1. Understanding CSS Filter Functions

The filter property applies graphical effects like blur, brightness, or color shifts. For changing colors, the most useful functions are:

• brightness() – Adjusts brightness
• contrast() – Changes contrast
• saturate() – Increases or removes color saturation
• hue-rotate() – Rotates colors around the color wheel
• invert() – Inverts colors
• grayscale() – Removes color
• You can also combine multiple filters

2. Change Image Color Tint with hue-rotate()

The hue-rotate() filter shifts all colors in the image by a degree on the color wheel (0 to 360deg).

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

This can make a red logo appear greenish or yellow, depending on the angle. Try different values to get the desired tint.

Example: A blue image with hue-rotate(180deg) may appear more purple or yellow-green.

3. Make an Image Grayscale or Colored

Remove all color:

 img {
  filter: grayscale(100%);
}

Or make it partially colored:

 img {
  filter: grayscale(50%);
}

To add color back on hover :

 img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%);
}

4. Create a Sepia or Vintage Look

 img {
  filter: sepia(80%) saturate(120%);
}

Combine sepia() with saturate() to enhance warmth.

5. Invert Colors (eg, for Dark Mode)

 img {
  filter: invert(1);
}

Useful when you want white icons to appear black on dark backgrounds — but be careful with colored images, as inversion can distort colors.

You can selectively invert only certain images:

 .invert-on-dark {
  filter: invert(1) hue-rotate(180deg); /* Sometimes fine-tunes color after invert */
}

6. Tint Image to a Specific Color (Creative Trick)

CSS filters alone can't directly "colorize" a grayscale image to a specific color like red or blue, but you can fake it using combinations:

 img {
  filter: brightness(0) saturate(100%) hue-rotate(120deg);
}

• brightness(0) makes the image black
• Then saturate(100%) and hue-rotate() add color
• This works best when you want a solid colored silhouette

For full colorization of grayscale images , consider using mix-blend-mode or SVG filters.

7. Combine Multiple Filters

You can stack filters in one declaration:

 img {
  filter: brightness(1.2) contrast(1.1) saturate(1.5) hue-rotate(45deg);
}

Order doesn't affect performance, but it can slightly affect visual results.

8. Performance and Browser Support

• CSS filters are well supported in modern browsers (Chrome, Firefox, Safari, Edge)
• Avoid heavy use on large images or animations without testing performance
• Use will-change or transform sparingly with filters to avoid layout jank

Final Tips

• Use transition for smooth filter changes (eg, on hover)
• Test on real devices — filters can be GPU-heavy
• For precise color replacement, consider SVG filters or canvas manipulation

Basically, CSS filters give you a powerful, lightweight way to dynamically alter image colors — great for themes, interactions, and accessibility. Not perfect for every use case, but very effective for quick visual tweaks.

以上是如何使用CSS過濾器更改圖像顏色？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！