Text invertiert basierend auf dem Hintergrundbild

Question

Ist es überhaupt möglich, so etwas nur mit CSS/CSS3 oder mit Javascript zu erhalten? aber kein Bild für Text.

Answer 1

Mit begrenzten Unterstützung von alten Browsern, können Sie dies mit Textclipping erreichen:

für diesen html:

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

mit diesem 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; 
} 

Sie den Hintergrund erhalten von der Basis (die die invertierten Farben des ersten Div hat), um nur durch den Text zu zeigen.

webkit demo

Schnitt

festgestellt, dass es in einem einzigen Element getan werden kann. Der Stil wäre:

.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

Um dies in CSS erreichen Sie benötigen würde Steigungen verwenden. Eine für den Hintergrund und eine für den Text, der Gradient wäre konstant. sehe dies sie zur Erzeugung von: http://www.colorzilla.com/gradient-editor/ diese produzieren:

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

das Hauptproblem immer noch, obwohl Gesicht ist nicht in der Lage zu „erkennen“ das Hintergrundbild, um die Textfarbe entgegengesetzt zu machen.

Wenn Sie wollen den Hintergrund erkennen Sie in den webkit -webkit-Hintergrund-Verbundstoff, der eine XOR hat aussehen könnten und plus dunkler und Plus-Feuerzeug für Verbundeffekte

Hoffnung, das hilft.