Ist es möglich, in CSS eine Art horizontale „Invertierungsmaske“ zu erstellen?

Ich habe zwei Blöcke (div-Elemente) mit einem schwarzen oben background-color: blackund einem weißen unten.

Ist es möglich, einen Text zu haben, der die beiden Zonen mit umgekehrten Farben überspannt?

Beispiel: Der obere Teil des Textes "FOO" ist weiß auf schwarz und der untere Teil schwarz über einem weißen Bereich.

Wenn Sie so etwas meinen:

Bearbeiten: Hier ist ein Weg, der nur ein HTML-Element erfordert und daher nicht seltsam ist, wenn er von Clients ohne CSS-Stil wie Suchmaschinen, Bildschirmleseprogrammen, RSS, Apps ohne Stil usw. gelesen wird (danke an Dominic für den Vorschlag, es zu versuchen :beforeund :after).

http://jsbin.com/UtUlIFO/2/edit

Der wichtige Code ( fügen Sie Ihre Farben hinzu ):

HTML: <div class="someclass" data-text="Some text">Some text</div>

CSS:

.someclass {     /* bottom half */
  position: relative;
  display: inline-block;
}

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;
}

Das HTML-Attribut kann alles sein - ich habe es verwendet, data-textweil es beschreibend ist und unerwünschte Nebenwirkungen vermeidet (z. B. könnten Sie es verwenden, titleaber es würde in einigen Browsern Mouseover erzeugen).

Wenn Sie display:block;das main ( .top) -Element verwenden möchten , fügen Sie width: 100%;dem inner ( .bottom) -Element etwas Ähnliches hinzu , damit es es ausfüllt.

Wenn Sie jQuery verwenden, können Sie diesen Stil ganz einfach auf jedes Element anwenden, ohne das data-textduplizierte Bit manuell eingeben zu müssen :

$('.someElement').each(function(){
  $(this).addClass('someclass').attr('data-text',$(this).text());
});

Demo davon plus einige andere Sachen wie mehrere Zeilen, Polsterung

Überraschenderweise ist es möglich, obwohl ich es nur empfehlen würde , wenn Du Website ist alles über die visuelle Wirkung und die Semantik des Codes nicht Angelegenheit, zusätzlich wird es wahrscheinlich nicht sehr konsistent über älteren Browser sein.

Das Ergebnis ist:

Dies ist keine schöne Lösung, und ich wette, es ist nicht die einzige da draußen, aber es macht, was Sie wollen.

Es ist erforderlich, dass Sie über zwei Instanzen des Textes verfügen. Mit absoluter Positionierung und einigen einfachen Berechnungen können Sie diesen Effekt erstellen.

Wenn wir also einen Container divhaben und innerhalb dieser zwei weiteren divsund innerhalb jeder dieser Instanzen eine Instanz des Textes, können Sie die folgende HTMLStruktur und CSSEigenschaften verwenden, um dies zu erreichen:

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

Hier ist eine JSFiddle des Ergebnisses. :) :)

Es gibt auch eine CSS3-Eigenschaft , die nur vom Webkit unterstützt wird und die Farben invertiert:

image {
 -webkit-filter: invert(100%);  
}

Und es gibt einen HTML5 Canvas Invert , hier ein Beispiel und den vollständigen Code . Es iteriert über alle Pixel in einem Bild und invertiert Rot, Grün und Blau, indem jede Komponente vom maximalen Farbwert 255 subtrahiert wird.

Beide Lösungen würden immer noch 2 Bilder und CSS-Positionierung für sie erfordern. Da die Kompatibilität nicht sehr gut ist, würde ich definitiv eine der anderen Antworten wählen :)