Bolehkah CSS Separuh Gaya Watak?

Bolehkah Anda Menggayakan Aksara Separuh dengan CSS?

Semasa mencari kaedah untuk menggayakan hanya sebahagian daripada aksara, seperti menjadikan separuh daripada huruf telus, anda telah menghadapi kesukaran. Anda telah meneliti kaedah untuk penggayaan separuh aksara, menggunakan CSS atau JavaScript untuk mencapai kesan ini dan menggunakan CSS pada 50% aksara, tetapi tidak berjaya. Anda lebih suka mengelak daripada menggunakan imej kerana teks akan dijana secara dinamik.

Penyelesaian CSS

Kedua-dua penyelesaian CSS dan JavaScript wujud untuk mencapai kesan yang anda inginkan. Begini cara anda boleh mendekati perkara ini menggunakan CSS:

Watak Tunggal

Untuk satu aksara, menggunakan CSS tulen sudah memadai. Gunakan kelas .halfStyle pada elemen yang mengandungi aksara dan cipta atribut kandungan data pada elemen yang sama.

CSS:

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px;
  color: black;
  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:

<span class="halfStyle" data-content="X">X</span>

Berbilang Aksara

Untuk menggunakan gaya ini pada berbilang aksara, penyelesaian JavaScript ialah disyorkan.

JavaScript:

// jQuery for automated mode
$(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:

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

Penyelesaian ini mengekalkan kebolehcapaian teks untuk pembaca skrin dan mudah diautomasikan merentas berbilang aksara.

Atas ialah kandungan terperinci Bolehkah CSS Separuh Gaya Watak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!