CSS3를 사용하여 텍스트 내부에 이미지를 배치하는 방법은 무엇입니까?

마우스를 가져 가면 마스크를 사용하여 텍스트의 모양을 변경하고 싶습니다. 나는 image-mask가이 일을하는 올바른 방법이라고 생각했으나 작동하도록 만들 수는 없다. 내 목표는 텍스트 내부에 이미지를 넣는 것입니다.CSS3를 사용하여 텍스트 내부에 이미지를 배치하는 방법은 무엇입니까?

HTML :

<div id="BEN">BEN</div>

CSS :

#ben { 
    font-family: 'Arial'; 
    font-size: 72px; 
    color: rgba(0,0,0,1); 
    float: right; 
    line-height:90px; 
    font-weight:bold; 

} 
#ben:hover { 
-webkit-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
-o-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
-moz-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
}

http://jsfiddle.net/tKE6N/3/

출처

2012-06-16 Ben Jackson

CSS ID는 대소 문자를 구분합니다. – egasimus

고맙지 만 여전히 이미지 마스크 작업을 볼 수 없습니다. –

큰 글자로 이미지 .jpg 파일을 볼 것으로 예상됩니까? 또한 정확한 ID 스타일로 jsFiddle을 업데이트하십시오. 서로 다르지 않아야합니다. – arttronics

귀하의 질문 제목 당

텍스트 문자의 내부 이미지를 기대의 더 중요한 것은 당신의 코멘트, 당신은이 작업을하지 달성하기 위해 CSS3 background-clip를 사용할 필요가 mask-image.

여기 올바른 방향으로 안내하는 웹 키트 tutorial이 있습니다.

jsFiddle과 함께 (Chrome 또는 Safari) 재생합니다. background-clip값를 들어

, Firefox는 text를 지원하지만, border-boxpadding-box 및 content-box을 지원하지 않습니다. 이러한 이유로 Firefox v13.0.1에서는 데모가 작동하지 않지만 v14에서는이 기능이 필요합니다.

해결 방법은 그림과 같이 SVG 방법을 사용하는 것입니다. HERE.

출처

2012-06-17 00:52:45 arttronics

고맙습니다. –

고마워, 나는 당신의 모든 지시를 따라 왔지만이 간단한 코드가 작동하지 않는 이유를 알 수 없다 : http://jsfiddle.net/tke6N/5/ –

'rgba (0,0,0,1)'을'rgba (0,0,0,0.5)'로 표시됩니다. 마지막 값은 글꼴 색상으로 배경 이미지를 볼 수있는 알파 투명도를 나타 내기 때문입니다. 섞인 글꼴 색상이 없으면'rgba (0,0,0,0)'을 사용하십시오. – arttronics

당신이 <div id="BEN">BEN</div>으로 사업부를 선언하고 CSS 클래스는 벤 이렇게 클래스를 변경되기 때문에이 작동하지 않습니다 BEN으로 변경하거나 div를 id="ben"

0으로 변경하십시오.

먼저 HMTL ad CSS 파일에 올바른 클래스가 있는지 먼저 확인해야합니다. CSS 수업은 case-sensitive입니다. 벤과 벤과 다를 수 있습니다.

더 여기 information

자세한 내용을 약 CSS Mask-Image & Text

출처

2012-06-16 23:43:01 Sajmon

고맙지 만 jsfiddle 또는 내 서버에서 작동하는 이미지 마스크가 보이지 않습니다. –

CSS3를 사용하여 텍스트 내부에 이미지를 배치하는 방법은 무엇입니까?

답변

관련 문제