CSS Filter:Invert Not Working with Background-Color

CSS filter:invert not working with background-color

TL;DR: Don't mess too much with html element.

The easy workaround is to block body's background propagation to the document's canvas, but make it take the same size as the html by removing its margin, and applying all the styles you had on html on the body, and the ones you had on the body to a wrapper <div>.

html {

  /* block body's background propagation */

  background: #FFF;

}

/* move all one layer down */

body {

  filter: invert(1);

  background: #fff;

  padding: 50px;

  /* make it cover the full canvas */

  margin: 0;

}

.wrapper {

  background-color: #0000ff;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

}

.text {

  text-align: center;

  color: red;

}

<div class="wrapper">

  <div class="text">

    If it works: color should not be red, background should not be blue and border should not be white

  </div>

</div>

avoid css filter invert changes in div::selection

You could just switch the colors for a selection within .a - so that when the whole content of that element gets inverted, you get the colors you want again.

* ::selection {
  background: #000;
  color: #fff;
}
.a, .b {
  background: red;
  color: yellow;
}
.a {
  filter: invert(1);
}
.a::selection {
  color: #000;
  background: #fff;
}

<div class='a'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>
<br/>
<div class='b'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>

How can I invert color using CSS?

Add the same color of the background to the paragraph and then invert with CSS:

div {

    background-color: #f00;

}

p { 

    color: #f00;

    -webkit-filter: invert(100%);

    filter: invert(100%);

}

<div>

    <p>inverted color</p>

</div>

Use CSS filter: invert(1) to show black image on white background

Try adding mix-blend-mode to the SVG

.bg {
  background-image: linear-gradient(90deg, black 50%, white 50%);
}

svg {
  filter: invert(1);
  mix-blend-mode: difference;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-12 bg bg-white">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100%">
  <circle cx="50" cy="50" r="30" fill="black" />
</svg>
    </div>
  </div>
</div>

Setting text color to inverted background color

div {
  background: linear-gradient(to right, #fff, #000);
  width: 100vh;
  height: 50vh;
}

span {
  font-size: 30vh;
  mix-blend-mode: difference;
  filter: invert(1);
}

<div>
  <span>Test</span>
</div>

CSS property filter: invert(80%) not working with IE

Invert is not supported in IE

caniuse.com

!important still not strong enough: images colors stay inverted

Well, it's simple, you have to invert once more!

We have learnt -1 * -1 = +1, just like that :
Inversion*Inversion=Normal!

so set the 0% of image to 100%,

Tip: !important is not needed to override a rule, that is defined above it, this below rule will automatically override the above one, so you can even remove it.

Answer code:

body { background-color: grey; }

p { color: white; }

.body {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}
            
img {
    -webkit-filter: invert(100%) !important;
    -moz-filter: invert(100%) !important;
    -o-filter: invert(100%) !important;
    -ms-filter: invert(100%) !important;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div class="body">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

---

Related Topics