基于背景图像反转文本

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 的反转颜色）获取背景，以仅通过文本显示。

网页套件演示

编辑

发现它可以在单个元素中完成。风格是：

.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;
}