文本与黑白滤镜对齐

Question

我有一个背景，其容器在其css中有一个过滤器，使页面的下半部分为黑色和白色效果。

我想要做的是让文本的下半部分做同样的事。任何想法？

class App extends Component {
  render() {
    return (
      <div className="portfoliobackground">
        <NavbarInstance />
            <div className='headline'>Text here</div>
            <div className='profile-box container'>
            </div>
      </div>
    );
  }
}

这是下面的CSS

body{
  background: url('../images/wtc2.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.headline{
  z-index: 0;
  font-size: 60px;
  font-family: 'Encode Sans Expanded', sans-serif;
  color: #e22422;
  text-align: center;
  position: relative;
  top: 7.5em;
}


.profile-box{
  z-index: -1;
  background: url('../images/wtc.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 filter: grayscale(100%);
 width: 100%;
 height: 50%;
 margin-top: 20%;

 border-top: white solid 3px;
 position: absolute;

}

Answer 1

尝试：

clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);

和

clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);

分别在两个不同颜色的文本元素上面。

Answer 2

有几种方法可以达到这种效果。

我想到的前两个是：两个都涉及创建两个不同的文本副本（一个是彩色的，另一个是黑色或白色）。使用固定定位和z-index属性将这两个副本一个放在另一个上面（将它们视为不同的层）。

溢出隐藏 - 如果你知道文字DIV的高度

在这种情况下，您将彩色文本包装在两个容器中：

1）第一个有一个固定的高度（在我的例子中，54px）。

 #co_1{height:54px;}

2）第二个高度设置为父级的50％，其溢出被隐藏（意味着超出其边界的所有内容都不会显示。

#co_2{height:50%;overflow:hidden;}

另一方面，黑色文字完全显示。鉴于它位于后面彩色的那个，但是它的上半部分是看不到的。

Jsfiddle

CLIP PATH - 如果你不知道文字DIV的高度

在这种情况下，您使用clip-path CSS属性显示文本的两半：大写字母为彩色，底部将彩色文本包装在两个容器中。

这是彩色文本（仅显示上半部分）：

#co_1{clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);}

这是黑色或白色文本（仅显示下半部分）：

#co_2{clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);}

请注意，可能无法完全支持clip-path属性(see here)！

Jsfiddle