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