CSS를 사용하여 이미지를 변경하지 않고 텍스트를 투명하게 만드는 방법

텍스트 색상 및 검정색 배경의 변경으로 어떤 페이지가 선택되었는지 사용자에게 알려주는 탐색 모음이 있습니다. 현재 페이지 내에서 텍스트 만 투명하게 만들고 싶습니다. 여기CSS를 사용하여 이미지를 변경하지 않고 텍스트를 투명하게 만드는 방법

예 : sammarchant.co.uk/new - 나는 CSS3하지만 행운을 사용하여 연구 한

을 볼 수있는 회색 영역을 아래로 스크롤, 나는 따라서 이미지를 사용하고자하지 않는 매우 최소까지로드 시간을 유지하려는.

출처

2012-06-15 Sam Marchant

일반 CSS/CSS3에서는 불가능합니다.

텍스트를 투명하게 만들었더라도 회색 영역을 스크롤 할 때 회색으로 표시되지 않습니다. 텍스트가 투명하면 뒤에 검은 배경이 표시됩니다.

그러나 일부 자바 스크립트를 사용하여 배경이 무엇인지 감지하고 이에 따라 글꼴 색을 변경할 수 있습니다.

출처

2012-06-15 10:50:55 Curt

그래, 스크롤 할 때 디자인의 나머지 부분을 보여주기 위해 왼쪽의 사각형 로고를 일치시키고 싶었습니다. –

코드는 다음과 같이해야한다 : -

nav a.current { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
}

편집 :이

CSS: 
nav a.current span { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

HTML: 
<nav> 
    <ul> 
     <li><a href="#"><span>Link></span><a></li> 
    </ul> 
</nav>

출처

2012-06-15 10:54:19 Subhajit

이것이 정확한 해결책 근처에 어떻게 보이지는 않습니다. – Curt

하지만이 배경 투명도도 변경됩니다. 단지 텍스트를 타겟팅하고 싶습니다. –

당신은 텍스트를 ''에 싸서 간단한 트릭을 적용한 다음 동일한 효과를 줄 수 있습니다. 예를 들면 다음과 같습니다. ''그래서 새로운 CSS 선택기는 nav a.current span {}' – Subhajit

순수 CSS에서이 작업을 수행하는 또 다른 방법을 추가 의견으로 당 이미지를 사용하지 않고 사용하는 것입니다 사용자 정의 글꼴. 당신이해야 할 일은 문자를 검정색 배경이있는 투명한 글자 인 글꼴 찾기/생성뿐입니다. this font

마찬가지로 당신은 당신의 서버에서 해당 글꼴을 배치하고 텍스트 색상으로 화이트 색상을 사용

출처

2012-06-15 10:57:58 toniedzwiedz

네브라스카 글꼴 문양이 필요하지만 Font 소프트웨어에서 편집 할 수 있지만 어제 밤 저는 그 생각을했습니다. 쉽게 찾을 수 없습니다. –

@SamMarchant 이제 생각해 보니 사용자 정의 글꼴을 추가하면 이미지와 같은로드 시간이 나빠질 수 있습니다. 결국 이미지가 최고의 솔루션이라고 생각합니다. 색상 공간을 가능한 작게 유지하여 크기를 줄이십시오. 또 다른 옵션은 SVG로 실험하는 것입니다. 그러나 간단하고 큰 이미지의 경우 파일 크기 축소가 가장 잘 보입니다. 이것들은 정말 작아 코드가 그림처럼 많은 공간을 차지할 수 있습니다. – toniedzwiedz

CSS @font-face 규칙을 사용하여 가져 오기 및 검정 수 있습니다 배경 으로 그렇다면 그 trnaparent 회색

등의 모습 이

css 
    nav a.current { 
     background:black; 
     color: white; 
     padding: 5px; 
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* For IE*/ 
     filter: alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5;  
     opacity: 0.5; 
    } 


Html 

    <nav> 
     <a class="current" href="index.html">home</a>    
    </nav>

출처

2012-06-15 11:27:02 dhaval

처럼 코드 모양의 무언가가 fontsize:0px 우선은 텍스트가 투명 얻을 것이다합니다.

출처

2014-01-29 15:01:53 Riyaz

CSS를 사용하여 이미지를 변경하지 않고 텍스트를 투명하게 만드는 방법

답변

관련 문제