CSS 스타일을 문자의 절반으로 지정할 수 있나요?

CSS를 문자의 절반에만 적용할 수 있나요?

문제:

어떻게 문자의 절반에만 스타일을 적용할 수 있나요? 예를 들어 글자의 절반을 투명하게 만듭니다.

이전 시도:

• 문자의 절반을 스타일링하는 방법 검색
• CSS 또는 JavaScript를 사용하여 문자 일부 스타일링
• CSS를 50% 적용 문자

예:

해결책:

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.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!