Bagaimanakah Saya Boleh Memohon CSS pada Separuh Aksara, Menjadikan Satu Separuh Telus?

Aplikasi silang untuk separuh aksara

Soalan

Bagaimana hendak menggunakan CSS pada separuh aksara, contohnya untuk menjadikan separuh daripada aksara itu telus?

Masalah ini telah cuba dilihat melalui kaedah berikut, tetapi gagal:

• Kaedah untuk mencantikkan aksara/separuh daripada huruf
• Mencantikkan sebahagian daripada watak dengan CSS atau JavaScript
• Gunakan CSS kepada 50% Watak

Berikut ialah contoh kesan sasaran:

[Imej]

Adakah terdapat penyelesaian CSS atau JavaScript untuk mencapai kesan ini atau adakah saya perlu menggunakan imej? Memandangkan teks akhirnya akan dijana secara dinamik, kami ingin mengelak daripada menggunakan imej.

Penyelesaian

Demo Muat turun zip | JavaScript Automasi untuk teks merentang atau berbilang aksara

Memelihara kebolehcapaian teks untuk pembaca skrin buta atau cacat penglihatan
• Bahagian 1: Penyelesaian Asas
• [Gambar]

Demo:

[Imej]

Demo:

Arahan:

untuk setiap watak yang mengandungi watak separa cantik yang anda inginkan. elemen menggunakan kelas .halfStyle. Untuk setiap elemen span yang mengandungi aksara, buat atribut data, seperti data-content="X" di sini.

Gunakan content:attr(data-content); pada pseudo-element supaya kelas .halfStyle:before adalah dinamik dan tidak perlu dikodkan keras untuk setiap kejadian.
• Digunakan pada mana-mana teks:

Cuma tambah kelas textToHalfStyle pada elemen yang mengandungi teks.

• JavaScript (mod automasi):

CSS:

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

HTML:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon CSS pada Separuh Aksara, Menjadikan Satu Separuh Telus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!