問題：
我們如何只設計半字的樣式？例如，將字母的一半設定為透明。
之前的嘗試：
範例：
解：解🎜>
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中文網其他相關文章！
