Jak mogę dodać duże wyblakłe tło tekstowe przez css?

Szukam utworzyć przewymiarowany tytuł Zune/Microsoft w CSS, tak aby div miał półprzezroczysty tekst za nim.Jak mogę dodać duże wyblakłe tło tekstowe przez css?

example

Jakieś pomysły? Mam nadzieję, że pozostanę bezużyteczny w kwestii wtyczek i obrazów - ale ważne jest, aby tekst mógł się przepełnić (niewidoczny) i że można go zmienić (prawdopodobnie przez JS). Musi być w stanie przelać się nieznacznie bez pojawiania się poza div; oznacza to, że zauważysz dół liter "tekstowych"; jest to odpowiednik ustawienia bottom: -5px; w CSS.

To co mam rozważa:

#about_big { 
    font-family: "Proxima Light", sans-serif; 
    font-size: 2000%; 
    color: rgba(100, 100, 100, .5); 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
}

... about wewnątrz div, który jest również overflow: hidden; ale ... Niestety. To się nie ukrywa.

Dzięki!

Źródło

2013-04-13 j6m8

http://jsfiddle.net/znuXs/? – monkeyinsight

Rozumiem, że odpowiedź została już przyjęta na twoje pytanie, ale myślałem, że mogę dostarczyć moje dwa centy, tylko ze względu na kompletność.

Podczas gdy nie ma nieodłącznego problemu z tworzeniem dodatkowego elementu do przechowywania tekstu, wolę użyć pseudoelementu ::after, aby go utworzyć. Prawdopodobnie jest to (IMHO) bardziej semantycznie poprawne, ale to naprawdę zależy od celu, w jakim ma służyć tekst.

W moim przykładzie, umieściłem tekst, który ma pojawić się w tle w HTML DATA- atrybutu, powiedzmy, data-bg-text:

<div class="bg-text" data-bg-text="text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus. 
</div>

I do CSS, po prostu trzeba utworzyć pseudo -elementowe i przypisać treści z niestandardowym HTML dATA- atrybut:

.bg-text { 
    background-color: #aaa; 
    overflow: hidden; 
    padding: 20px 20px 100px 20px; 
    position: relative; 
    width: 400px; 
} 
.bg-text::after { 
    color: #fff; 
    content: attr(data-bg-text); 
    display: block; 
    font-size: 80px; 
    line-height: 1; 
    position: absolute; 
    bottom: -15px; 
    right: 10px; 
}

Zobacz skrzypce tutaj - http://jsfiddle.net/teddyrised/n58D9/ lub sprawdź przykładowe proof-of-concept poniżej:

.bg-text { 
 
    background-color: #aaa; 
 
    padding: 20px 20px 100px 20px; 
 
    position: relative; 
 
    width: 400px; 
 
    overflow: hidden; 
 
} 
 
.bg-text::after { 
 
    color: #000; 
 
    content: attr(data-bg-text); 
 
    display: block; 
 
    font-size: 80px; 
 
    line-height: 1; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    right: 10px; 
 
}

<div class="bg-text" data-bg-text="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.</div>

Źródło

2013-04-13 23:20:51 Terry

Fantastycznie użyteczne, dziękuję bardzo! EDYCJA: Moja jedyna skarga to to, że nie obcina ona tekstu na dole div; prawdopodobnie łatwo naprawić, choć nie wiem, jak to zrobić w tym przykładzie. – j6m8

@ j6m8 Ah, zapomniałem. Po prostu dodaj 'overflow: hidden' do elementu nadrzędnego. Zaktualizowano także skrzypce. – Terry

Idealne, dziękuję milion! – j6m8

Oto pełna roztw:

<!doctype html> 
<html> 
<head> 
<title>Text Background</title> 
<style> 
body { 
    background-color: #eee; 
} 
.container { 
    position: relative; 
    background-color: #ccc; 
    z-index: -2; 
    height: 25pt; 
    width: 160pt; 
    overflow: hidden; 
} 
.background-text { 
    color: white; 
    font-size: 20pt; 
    position: absolute; 
    z-index: -1; 
    bottom: -8pt; 
    right: 0; 
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="content"> 
    Lorem ipsum dolor. 
    </div> 
    <div class="background-text">Background</div> 
</div> 

</body> 
</html>

Źródło

2013-04-13 09:30:07 allyourcode

Przepraszam, myślę, że byłem trochę niespecyficzny, gdy mówiłem o przepełnieniu - działa to świetnie, o ile obraz jest tego samego koloru co tło i nie jest przepełniony, ale nie jestem tego pewien. Zmieniłem moje pytanie, aby odzwierciedlić fakt, że "tekst w tle" może się przepełnić i musi pozostać niewidoczny. – j6m8

Zaktualizowałam mój soln. Chodziło tylko o dodanie 'overflow: hidden' do' .container'. Inna niewielka zmiana polega na tym, że przesunąłem tekst w tle (aby pokazać, jak wygląda przepełnienie), i dodałem do organizmu kolor tła, aby było jasne, że przepełnienie działa zgodnie z oczekiwaniami. – allyourcode

Fantastycznie, dziękuję bardzo !! – j6m8

Państwo nakładają na div z innego DEMO http://jsfiddle.net/FkE2V/

#container { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#text, #other { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#other { 
    z-index: 10; 
    color:#f00; 
}

Źródło

2013-04-13 09:38:34 Vector

Oto moje rozwiązanie. Podgląd w jsfiddle

.about_box { 
 
    z-index: 5; 
 
    width: 728px; 
 
    height: 400px; 
 
    position: relative; 
 
    background: #0099ae; 
 
    overflow: hidden; 
 
} 
 

 
#about_small { 
 
    z-index: 7; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    color: #f7f7f7; 
 
    padding: 20px; 
 
} 
 

 
#about_big { 
 
    z-index: 6; 
 
    font-family: Arial; 
 
    font-size: 120px; 
 
    color: rgba(255, 255, 255, 0.5); 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
}

<div class="about_box"> 
 

 
    <div id="about_small"> 
 
    "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog" 
 
    </div> 
 
    <div id="about_big"> 
 
    text 
 
    </div> 
 

 
</div>

Można poeksperymentować z line-height lub dokonać bottom negatywny w #about_big uzyskać tekst tła na samym dole.

Źródło

2013-04-13 09:45:34 sampoh

Jak mogę dodać duże wyblakłe tło tekstowe przez css?

Odpowiedz

Powiązane problemy