html - Inverting a div render in CSS -
i have 2 divs, 1 white background, 1 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 wish write text goes on both of divs has inverted color depending on div letter's pixel over. something like i <span> , set letter's color doesn't handle situation when single letter on both divs. anything do? (if possible i'd not down css chrome 47 , firefox 43 support). you can not without ugly hacky code. make 2 elements 2 texts overlapping each other hidden on other element. better explained example. check out jsfiddle. <div class="wrapper"> <div id="left"> <span>this long sentence test.</span> </div> <div id="right"> <span>this lo...