文字の半分に CSS を適用して半分を透明にするにはどうすればよいですか?-CSSチュートリアル-php.cn

文字の半分に CSS を適用して半分を透明にするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-29 07:07:10

オリジナル

842 人が閲覧しました

How Can I Apply CSS to Half a Character, Making One Half Transparent?

半分の文字のクロス適用

質問

文字の半分を透明にするなど、文字の半分に CSS を適用するにはどうすればよいですか?

この問題を次の方法で確認しようとしましたが、すべて失敗しました。

文字/文字の半分を美化する方法
文字の一部を美化するCSS または JavaScript を使用した文字
CSS を 50% に適用

の文字ターゲット効果の例を次に示します:

[Image]

この効果を実現するための CSS または JavaScript ソリューションはありますか?画像に頼らなければなりませんか？テキストは最終的に動的に生成されるため、画像の使用は避けたいと考えています。

ソリューション

デモ | HalfStyle.com (GitHub にリダイレクト)

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

パート 1: 基本的な解決策

[図]

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

パート 2: 任意のテキストの自動化

[画像]

デモ: http://jsfiddle.net/arbel/pd9yB/1696/

手順: 必要な半美しいキャラクターを含む各キャラクターの

要素は .halfStyle クラスを適用します。
文字を含む各 Span 要素に対して、ここで data-content="X" などのデータ属性を作成します。
.halfStyle:before クラスが動的であり、インスタンスごとにハードコーディングする必要がないように、疑似要素で content:attr(data-content); を使用します。

任意のテキストに適用されます:

テキストを含む要素に textToHalfStyle クラスを追加するだけです。

コード

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>

ログイン後にコピー

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>

ログイン後にコピー

以上が文字の半分に CSS を適用して半分を透明にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。