javascript - 基于背景图像的文本反转

Question

是否有可能仅使用 CSS/CSS3 或 javascript 获得类似的东西？但没有文字图片。

Answer 1

在旧浏览器的有限支持下，您可以通过文本剪辑来实现:

对于这个 html:

<div class="filter">
<div class="base">SOME TEXT</div>
</div>

使用那个 CSS:

.filter {
    width: 250px;
    height: 250px;
    background: -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%);
}
.base {
    width: 100%;
    height: 100%;
    font-size: 80px;
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%);
    -webkit-background-clip: text;
    color: transparent;
}

您将从底部(具有第一个 div 的反转颜色)获得背景，仅通过文本显示。

webkit demo

编辑

发现可以在单个元素中完成。样式将是:

.base {
    width: 100%;
    height: 100%;
    font-size: 80px;
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%), -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%);
    -webkit-background-clip: text, border;
    color: transparent;
}