在CSS中反转div渲染

Question

我有两个div，一个是白色背景，一个是黑色背景：

<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>

我希望做的是写一个文本，它覆盖两个div但是反转的颜色取决于字母的像素结束的div。

像

这样的东西

我只能<span>并正确设置字母的颜色，但当两个div上都有一个字母时，这并不能处理这种情况。

我能做什么？ （如果可能的话，我不想使用仅支持Chrome 47和Firefox 43的CSS。）

Answer 1

你可以做到但不是没有丑陋的hacky代码。

制作两个元素，两个文本相互重叠但隐藏在另一个元素上。通过一个例子更好地解释。

查看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/