CSS は文字の半分をスタイルできますか?

文字の半分に CSS を適用することは可能ですか?

問題:

文字の半分だけをスタイルするにはどうすればよいですか?たとえば、文字の半分を透明にします。

前の試み:

• 文字の半分をスタイルするメソッドの検索
• CSS または JavaScript を使用して文字の一部をスタイリングする
• 文字の 50% に CSS を適用する

例:

解決策:

GitHub プラグイン:

https://github.com/arbel/half-style

デモ:

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

機能:

• 単一文字用の純粋な CSS
• テキストまたは複数の文字にわたる JavaScript 自動化
• スクリーン リーダーのテキスト アクセシビリティを維持

基本的な解決策:

単一文字:

このソリューションでは、純粋な CSS と .halfStyle という名前のクラスを使用します。

任意のテキスト:

クラス .textToHalfStyle を要素に追加します。

JavaScript オートメーション:

<code class="javascript">// 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 style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i ' + chars[i] + '';
    }

    // Write to DOM only once
    $el.append(output);
  });
});</code>

CSS:

<code class="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;
}</code>

使用例:

<code class="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></code>

以上がCSS は文字の半分をスタイルできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。