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

Question

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

Answer 1

With limited support from old browsers, you can achieve this with text clipping:

for this html:

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

with that 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;
}

You will get the background from the base (that has the inverted colors of the first div) to show only thru the text.

webkit demo

Editing

Have found that it can be done in a single element. The style would be:

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

Answer 2

要在 CSS 中实现这一点，您需要使用渐变。一个用于背景，一个用于文本，渐变将是恒定的。看到这个来生成它们： http: //www.colorzilla.com/gradient-editor/来产生这个：

    background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(135deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

您仍然面临的主要问题是无法“检测”背景图像以使文本颜色相反。

如果您想检测背景，您可以查看 webkit -webkit-background-composite ，它具有 XOR 和 plus-darker 和 plus-lighter 的复合效果

希望这可以帮助。