문자 절반에 CSS를 적용하여 절반을 투명하게 만드는 방법은 무엇입니까?

반쪽 문자에 대한 교차 애플리케이션

질문

문자의 절반을 투명하게 만드는 등 CSS를 문자의 절반에 적용하는 방법은 무엇입니까?

이 문제는 다음과 같은 방법으로 보려고 했으나 모두 실패했습니다.

• 문자/글자 반을 아름답게 하는 방법
• 일부 미화 CSS 또는 JavaScript가 포함된 문자
• CSS를 50% 적용

의 문자 대상 효과의 예는 다음과 같습니다.

[이미지]

이 효과를 얻을 수 있는 CSS 또는 JavaScript 솔루션이 있나요? 이미지에 의존해야 합니까? 텍스트는 결국 동적으로 생성되므로 이미지 사용은 피하고 싶습니다.

솔루션

데모 | zip 다운로드 | HalfStyle.com(GitHub으로 리디렉션)

• 단일 문자용 순수 CSS
• 자바스크립트 확장된 텍스트 또는 여러 문자 자동화
• 시각 장애가 있는 스크린 리더를 위한 텍스트 접근성 유지

1부: 기본 솔루션

[그림]

데모: http://jsfiddle.net/arbel/pd9yB/1694/

파트 2: 텍스트 자동화

[이미지]

데모: http://jsfiddle.net/arbel/pd9yB/1696/

지침:

• 원하는 세미 아름다운 캐릭터가 포함된 각 캐릭터 요소는 .halfStyle 클래스를 적용합니다.
• 문자가 포함된 각 범위 요소에 대해 여기에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!