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
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>'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
'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
Evet. Bu tam olarak istediğim şey, teşekkür ederim :) – colzu
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;
}
Ama sizin örnekte gerçekte ne istediğini görüyorum, bu yüzden artı bir –
Eğer 'opaklığını denediniz: Burada
bir örnek .4' örneğin? –Metnin görünmesini istiyor. Siz solutoin sadece arka planı daha görünür hale getirirsiniz. – RobAu
@KaiQing Çalışmayacak, örneğini gör. CSS maskeleme doğru yoldur. – Paul