How to \"wash out\" colors with CSS filters?答案

【问题标题】：How to "wash out" colors with CSS filters?How to \"wash out\" colors with CSS filters?
【发布时间】：2022-12-01 20:26:23
【问题描述】：

I am trying to use CSS filters to create a "disabled" look for components I am working on. I am trying to make it so that everything is "washed out" a bit. I can create this effect by using opacity(0.75) for components which are on white background: then black becomes gray and all strong colors become a bit more white. But the issue is if the component is not on white background, then opacity does not work as I would like. So how could I use CSS filters to create this "wash out" look? Like to multiply with white color a bit all colors.

I tried contrast but it looks like everything goes to gray, not white (so black stays black much longer than with opacity, while other colors are already washed out).

【问题讨论】：

add a transparent white overlay on its top?
A JS approach here, just as a FYI in case it can help: stackoverflow.com/q/47022484/1225328

标签： css

【解决方案1】：

Using a combination of Contrast and Brightness filters might give you what you need:

filter: contrast(30%) brightness(150%);

【讨论】：

【解决方案2】：

Isn't simply

#result{
   -webkit-filter: grayscale(50%);
   -moz-filter: grayscale(50%);
   filter: grayscale(50%);
   opacity: 70%;
}

what you are looking for?

【讨论】：

No, opacity makes the background come through, so if it is red background, colors move to red. I always want them to move to white.