2016-03-28 20 views
0

Yapmaya çalıştığım şey, beyaz opak arka plana sahip bir div içinde, metnin tam olarak saydam olmasını ve böylece gövdenin arka planını göstermesini istiyorum.Arka planını göstermek için METİN beyaz bir divanda tamamen saydam hale nasıl getirilir?

Bu benim defa kaynak kodu:

body, html { 
 
    color: #FFF; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
    font-family: Arial; 
 
    background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed; 
 
    background-size: cover; 
 
} 
 
.center { 
 
    position: absolute; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    top: 50%; 
 
    left: 50%; 
 
    text-align: center; 
 
    width: 400px; 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    margin-top: -15px; 
 
    margin-left: -215px; 
 
    background: rgba(255,255,255,.5); 
 
}
<div class="center"> 
 
    Lorem ipsum dolor sit amet. 
 
</div>

Ne yapmaya çalışıyorum div 's yapmak için de metin görünmez hale ve palmiye ağaçları duvar kağıdı göstermek ve etmektir arka plan beyaz.

.center { 
color: transparent; 
background-color: #FFF; 
} 

Ama sadece metin ve beyaz arka plan hem yapar:

denedim. Ben başarmak için çalışıyorum ne

Örnek: beyaz bir arka planı sadece butonuna

Odak (yani div hayal). Mavi rengin (hem vücut arka planının hem de metnin) arka plan görüntüsü olduğunu düşünün.

Bu yalnızca CSS ve HTML kullanılarak yapılabilir mi? Ancak javascript veya jquery umrumda değil.


Boş ver, @JokerFan sayesinde, bir çözüm here bulduk.

Not: Bu yalnızca webkit tarayıcılarında çalışır.

+0

- Metin şeffaf olsaydı sen, düğme * arka plan * değil görürdük bunun ötesinde ne olursa olsun. – jonrsharpe

+0

Yapmak istediğim şey bu, metnin ötesinde ne olduğunu görmesini sağlamak – CZX

+0

Başka bir HTML öğesi veya benzeri bir şey eklemek zorunda mıyım? – CZX

cevap

0

, mantıklı değil

body, html { 
 
    color: #FFF; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
    font-family: Arial; 
 
    background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed; 
 
    background-size: cover; 
 
} 
 
.center { 
 
    position: absolute; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    top: 50%; 
 
    left: 50%; 
 
    text-align: center; 
 
    width: 400px; 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    margin-top: -15px; 
 
    margin-left: -215px; 
 
    background: rgba(255,255,255,1); 
 
} 
 
span { 
 
    background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed; 
 
    background-size: cover; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    display:block; 
 
}
<div class="center"> 
 
    <span> Lorem ipsum dolor sit amet.</span> 
 
</div>

+0

Teşekkürler, ne istediğimi anladın! Ancak, sadece bir düzeltme, geçerli 'span' css için değiştirin:' span { background: url (http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) merkezi sabit; background-size: cover; -webkit-text-fill-color: saydam; -webkit-background-clip: text; ekran: blok; } ' – CZX

+0

@CZX Peki, sorumu kabul edildi olarak işaretleyebilir misiniz? – AVI

+0

Ayrıca, # kapsayıcı gibi gereksiz stilleri kaldırın ve html, body partisindeki ek stilleri kaldırın. – CZX

0

Seti #fff da renk

.center { 
    color: #fff; 
    background-color: #FFF; 
} 
0

transparent ama arka plan yapar hiçbir renk değeri yoktur metne.

Siz düzeniniz için, beyaz rengi kullanarak kenarlığı kullanabilir ve düğmenin arka planını saydam olarak uygulayabilirsiniz. Ve şeffaf yerine metin için renk beyazı kullanın. Ben şöyle bir şey bekliyoruz düşünüyorum

İlgili konular