CSS 간단한 텍스처 텍스트

내가 h1의이 필요

이와 같은 방식으로 질감 : http://i.imgur.com/aZk9YAI.png CSS 간단한 텍스처 텍스트

을하지만 난 그것을 수행하는 방법을 찾을 수 없습니다. 당신이 로고는 것을 알 수 있습니다 관심있는 페이지의 소스를 검사 한 경우

h1{ 
    margin-top:20px; 
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
border-top-style: solid; 
    border-top-width: 1px; 
border-color: #333333; 
font-weight:normal; 
text-transform: uppercase; 
font-family: 'Steelfish Rg', 'helvetica neue', helvetica, arial, sans-serif; 
font-weight: 400; 
-webkit-font-smoothing: antialiased; 
}

출처

2014-11-23 Slava Knyazev

'background-clip'을 사용 하시겠습니까? http://css-tricks.com/image-under-text/ – Terry

@Terry IE에서 작동하지 않습니다. 링크가있는 동안 –

아마도 어쩌면 ** 지원하고 싶은 브라우저를 ** 언급하는 데 도움이됩니다 ** . – Terry

: 나는 H1이 코드가 http://www.eminem.com/home

나는이 웹 사이트의 스크린 샷을했다 image file의 형식으로 하드 코드됩니다.

역동적으로 질감이있는 텍스트의 경우 WebKit 브라우저에서 지금까지 지원되는 background-clip 속성을 사용할 수 있습니다. 이 사용할 수있는 다른 폴백 (fallback)이 있고, 기술은 여기에 잘 설명되어 있습니다 : 이런 텍스트 효과에 대한 http://css-tricks.com/image-under-text/

h1{ 
 
    /* Background clip */ 
 
    background-image: url(http://i.imgur.com/RwVIbSX.jpg); /* Change URL to texture file name */ 
 
    background-repeat: repeat; 
 
    background-position: center center; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    
 
    /* Other styles */ 
 
    margin-top:20px; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 1px; 
 
    border-top-style: solid; 
 
    border-top-width: 1px; 
 
    border-color: #333333; 
 
    font-weight:normal; 
 
    text-transform: uppercase; 
 
    font-family: 'Steelfish Rg', 'helvetica neue', helvetica, arial, sans-serif; 
 
    font-weight: 400; 
 
    -webkit-font-smoothing: antialiased; 
 
}

<h1>Title Text</h1>

출처

2014-11-23 19:28:41 Terry

에서 작동하고 싶습니다. 링크 된 웹 사이트가 작동하는 동안 그 웹 사이트가 다른 작업을 수행하며 배경 클립이 IE에서 작동하지 않습니다. –

일부 연구를 수행하고 대체 코드를 찾은 후 'ok' –

, 당신은 오히려 코드 그것보다 이미지를 사용하는 것이 더 낫다. 호환성 때문입니다. background clip은 탐색 가치가 있지만 웹킷과 호환됩니다. 좀 더 실제적인 해결책은 같은 이유로 이미지입니다.

출처

2014-11-23 19:56:03 zhirzh

CSS 간단한 텍스처 텍스트

답변

관련 문제