2014-10-29 16 views
5

background-image ile body ve divbackground-color ile beyaz olarak var.Metin "görmek" nasıl yapılır?

Metni, sayfanın arkaplanına açılan bir pencere gibi görebilmek için div (#content olarak adlandırılır) metnini görmeye çalışıyorum. Aynı arka plan dosyasını atamak (sonunda yeniden konumlandırılmış olması gerekir) sizin #content için

enter image description here

+1

Eğer 'opaklığını denediniz: Burada

bir örnek .4' örneğin? –

+0

Metnin görünmesini istiyor. Siz solutoin sadece arka planı daha görünür hale getirirsiniz. – RobAu

+1

@KaiQing Çalışmayacak, örneğini gör. CSS maskeleme doğru yoldur. – Paul

cevap

5

Elde etmeye çalıştığınız şey CSS ile mümkündür. background-clip: text ile metin için bir arka plan kullanabilirsiniz, ancak sayfanın arka planıyla hizalamanız gerekir.

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>

+2

'Arka plan-klip: metin' CSS3 olduğundan ve bir web seti uzantısı olmadığından emin misiniz? [Spec] (http://dev.w3.org/csswg/css-backgrounds/#the-background-clip), 'text'i' background-clip' olası bir değeri olarak listelemez. – Oriol

+0

'h1'nin' color''' saydam olmamalıdır çünkü bu durumda metin webkit olmayan tarayıcılarda görünmez hale gelir. Ve webkit tarayıcıları buna ihtiyaç duymazlar çünkü “-webkit-text-fill-color: transparent”. – Oriol

+0

Evet. Bu tam olarak istediğim şey, teşekkür ederim :) – colzu

1

deneyin kırpma: Burada

bir örnek

#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; 
} 

Kaynak: http://css-tricks.com/image-under-text/

+0

Ama sizin örnekte gerçekte ne istediğini görüyorum, bu yüzden artı bir –

İlgili konular