Wie kann ich CSS auf die Hälfte eines Zeichens anwenden und eine Hälfte transparent machen?

Kreuzanwendung für halbes Zeichen

Frage

Wie wende ich CSS auf die Hälfte eines Zeichens an, um beispielsweise die Hälfte des Zeichens transparent zu machen?

Es wurde versucht, dieses Problem mit den folgenden Methoden zu beheben, aber alle schlugen fehl:

• Methoden zum Verschönern von Zeichen/Buchstabenhälften
• Verschönern eines Teils von a Zeichen mit CSS oder JavaScript
• CSS auf 50 % anwenden Die Zeichen von

Hier ist ein Beispiel für den Zieleffekt:

[Bild]

Gibt es eine CSS- oder JavaScript-Lösung, um diesen Effekt zu erzielen, oder tue ich das? Müssen Sie auf Bilder zurückgreifen? Da der Text letztendlich dynamisch generiert wird, möchten wir die Verwendung von Bildern vermeiden.

Lösung

Zip herunterladen |. HalfStyle.com (Weiterleitung zu GitHub)

• Reines CSS für ein einzelnes Zeichen
• JavaScript Automatisierung für übergreifenden Text oder mehrere Zeichen
• Bewahrung der Textzugänglichkeit für blinde oder sehbehinderte Bildschirmleser

Teil 1: Basislösung

[Bild]

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

Teil 2: Automatisierung eines beliebigen Textes

[Bild]

Demo: http://jsfiddle.net/arbel/pd9yB/1696/

Anleitung:

• für jedes Zeichen, das das gewünschte halbschöne Zeichen enthält Das Element wendet die .halfStyle-Klasse an.
• Erstellen Sie für jedes Span-Element, das Zeichen enthält, ein Datenattribut, wie hier data-content="X".
• Verwenden Sie content:attr(data-content); für das Pseudoelement, damit die .halfStyle:before-Klasse dynamisch ist und nicht für jede Instanz fest codiert werden muss.

Gilt für jeden Text:

• Fügen Sie einfach die Klasse textToHalfStyle zum Element hinzu, das den Text enthält.

Code

JavaScript (Automatisierungsmodus):

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span>

CSS:

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Das obige ist der detaillierte Inhalt vonWie kann ich CSS auf die Hälfte eines Zeichens anwenden und eine Hälfte transparent machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!