Ich habe zwei Blöcke (div-Elemente) mit einem schwarzen oben background-color: black
und 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.
Antworten:
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
:before
und: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:
Das HTML-Attribut kann alles sein - ich habe es verwendet,
data-text
weil es beschreibend ist und unerwünschte Nebenwirkungen vermeidet (z. B. könnten Sie es verwenden,title
aber es würde in einigen Browsern Mouseover erzeugen).Wenn Sie
display:block;
das main (.top
) -Element verwenden möchten , fügen Siewidth: 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-text
duplizierte Bit manuell eingeben zu müssen :Demo davon plus einige andere Sachen wie mehrere Zeilen, Polsterung
quelle
:after
oder:before
irgendwelchen Ideen) erstelle .Ü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
div
haben und innerhalb dieser zwei weiterendivs
und innerhalb jeder dieser Instanzen eine Instanz des Textes, können Sie die folgendeHTML
Struktur undCSS
Eigenschaften verwenden, um dies zu erreichen:Hier ist eine JSFiddle des Ergebnisses. :) :)
quelle
Es gibt auch eine CSS3-Eigenschaft , die nur vom Webkit unterstützt wird und die Farben invertiert:
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 :)
quelle