如何使用CSS反转背景图片的颜色？附示例背景代码

Got it, let's figure out how to reverse the color of your SVG background. There are two simple, reliable ways to do this—pick whichever fits your workflow best:

方法1：使用CSS Filter（快速便捷） #

If you don't want to dig into the SVG code itself, using the invert() CSS filter is the fastest way. This will flip all colors in the SVG while preserving the original opacity setting.

Here's the modified CSS:

html {
  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
  filter: invert(1);
}

Note: If you want to adjust the brightness or contrast after inversion, you can chain additional filters like filter: invert(1) brightness(1.2); to fine-tune the look.

方法2：直接修改SVG的填充颜色（精准控制） #

If you prefer to edit the SVG directly (avoiding any potential filter-related edge cases), you can calculate the inverted hex color of the original #9C92AC and replace it in the data URL.

The original color #9C92AC converts to RGB values (156, 146, 172). To invert it, subtract each component from 255:

• 255 - 156 = 99 (#63)
• 255 - 146 = 109 (#6D)
• 255 - 172 = 83 (#53)

So the inverted color is #636D53, which URL-encodes to %23636D53. Here's the updated CSS:

html {
  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%23636D53" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}

This method gives you full control over the exact color, with no dependency on CSS filters. The fill opacity remains at 0.4, just like your original code.

内容的提问来源于stack exchange，提问作者Abhuday