問題:
文字の半分だけをスタイルするにはどうすればよいですか?たとえば、文字の半分を透明にします。
前の試み:
例:
解決策:
GitHub プラグイン:
https://github.com/arbel/half-style
デモ:
http://jsfiddle.net/arbel/pd9yB/1694/
機能:
基本的な解決策:
単一文字:
このソリューションでは、純粋な 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 サイトの他の関連記事を参照してください。