"투명"텍스트를 만드는 방법은 무엇입니까?

나는 background-image 및 div과 background-color을 흰색으로 갖는 body을가집니다."투명"텍스트를 만드는 방법은 무엇입니까?

div (해당 내용은 #content)에 텍스트를 표시하려고하므로 텍스트가 사이트의 배경에있는 창과 비슷합니다. 같은 배경 파일을 지정합니다 (결국 재배치 할 필요가) 당신의 #content에 대한

enter image description here

출처

2014-10-29 colzu

당신이'불투명도를 시도 있습니다 : 여기

은 예입니다 .4' 예를 들면? –

그는 텍스트가 투명하게되기를 원합니다. 당신은 solutoin만이 배경을 더 쉽게 볼 수 있습니다. – RobAu

@KaiQing 작동하지 않습니다. 그의 예를보세요. CSS 마스킹이 올바른 방법입니다. – Paul

달성하고자하는 것은 CSS로 가능합니다. background-clip: text을 사용하면 텍스트의 배경을 사용할 수 있지만 페이지의 배경과 정렬해야합니다.

body { 
 
    background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat; 
 
    margin: 10px; 
 
    background-position: center top; 
 
} 
 
h1 { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    padding: 10px; 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    font-size: 83px; 
 
    margin: 450px 0px 0px 0px; 
 
} 
 
span { 
 
    background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    display: block; 
 
    background-position: center -450px; 
 
}

<h1><span>NEW YORK</span></h1>

출처

2014-10-29 23:37:00

'background-clip : text'는 CSS3이고 webkit 확장이 아닙니까? [spec] (http://dev.w3.org/csswg/css-backgrounds/#the-background-clip)은'background-clip'의 가능한 값으로'text'를 나열하지 않습니다. – Oriol

'h1'의'color'는 webkit 브라우저가 아닌 브라우저에서 보이지 않게되기 때문에'transparent'가되어서는 안됩니다. 웹킷 브라우저는'-webkit-text-fill-color : transparent'를 가지고 있기 때문에 필요하지 않습니다. – Oriol

예. 이것은 내가 원했던 것입니다. 감사합니다. :) – colzu

시도 클리핑 : 여기

은 예입니다

#content { 
color: rgba(255,255,255,.5); /* Fallback: assume this color ON TOP of image */ 
background: url(image.jpg) no-repeat; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
}

출처 : http://css-tricks.com/image-under-text/

출처

2014-10-29 23:25:24 Paul

하지만 내가 실제로 당신이 원했던 것을 보았습니다. 그래서 그걸 더하기 –

"투명"텍스트를 만드는 방법은 무엇입니까?

답변

관련 문제