如何將 CSS 應用於半個字符，使一半透明？

半分字符的十字應用

問題

怎麼在字符的一半中應用 CSS，例如讓字符的一半透明？

這個問題已經嘗試透過以下方法查看，但都失敗了：

• 美化字元/字母一半的方法
• 用CSS 或JavaScript 美化字元的一部分
• 將CSS 塗抹在50%的字元

以下是目標效果的範例：

[圖片]

是否有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”。
• 在偽元素上使用 content:attr(data-content);，這樣 .halfStyle:before 類別就具有動態性，無需為每個實例硬編碼。

應用於任何文字：

• 只需將 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中文網其他相關文章！