Inverting a div render in CSS

Question

I have two divs, one with a white background, one with a black background:

<style>
#leftside
{
float:left;
width:50%;
height:100%;
background:#fff;
}
#rightside
{
float:right;
width:50%;
height:100%;
background:#000;
}

<div id="leftside">

</div>
<div id="rightside">

</div>

What I wish to do is write a text that goes over both of the divs but has an inverted color depending on which div that letter's pixel is over.

Something like

I COULD just <span> and set the letter's color properly but this doesn't handle the situation when a single letter is on both divs.

Anything I could do? (if possible I'd like not to get down to CSS that only Chrome 47 and Firefox 43 support).

sorry that is not possible unless you make it into an image when they are on both div — Chanckjh, Aug 30 '15 at 16:52
You may be able to use the css "background-blend-mode" to do this, examples of this css code can be found at http://codepen.io/team/css-tricks/pen/GgavOP — Ferrybig, Aug 30 '15 at 16:57
posible duplicat [Invert CSS font-color depending on background-color](http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) and [invert color using css](http://stackoverflow.com/questions/17741629/invert-color-using-css) — Vucko, Aug 30 '15 at 17:57

Jacob · Accepted Answer · 2015-08-30T18:06:57.920

You can do it but not without ugly hacky code.

Make two elements with two texts that are overlapping each other but hidden on the other element. Better explained by an example.

Check out the jsFiddle.

<div class="wrapper">

  <div id="left">

    <span>This is a long sentence as test.</span>

  </div>
  <div id="right">

    <span>This is a long sentence as test.</span>

  </div>
</div>

-

body {
  background: #CACACA;
}
.wrapper {
  width: 300px;
  height: 150px;
  position: relative;
  }
  .wrapper span {
    width: 300px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .wrapper #left {
    width: 50%;
    height: 150px;
    background: #FFFFFF;
    display: inline-block;
    color: #000000;
    position: relative;
  }
  .wrapper #right {
    width: 50%;
    height: 150px;
    background: #000000;
    display: inline-block;
    margin-left: -4px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
  }
  .wrapper #right span {
    left: -150px;
  }

https://jsfiddle.net/66t8zf9s/

score 0 · Answer 2 · answered Dec 08 '21 at 16:39

Well, this is an old answer but for those that need this here is my solution:

You need: a background in white a background in black some text overlapping both.

If you now set the mix-blend-mode to difference for the element containing the text, it takes the difference of the color you gave it and the background behind it.

E.g. If it has white as color and black as background the difference is white.
If it has white as color and white as background the difference is black.

Inverting a div render in CSS

2 Answers2