Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html + css] Tło tekstu żeby było... tekstem (?!)
Forum PHP.pl > Forum > Przedszkole
roobik
Witam!
Szukałem po googlach - niestety. Albo nie znalazłem, bo czegoś takiego nie ma, albo dlatego, że nie potrafię szukać winksmiley.jpg

Chodzi o to, by ta czwórka była tekstem-backgroundem :] dla tekstu (nawet brzmi dziwnie biggrin.gif

Czy coś takiego jest możliwe?
barat
a to nie są po prostu dwa div-y z różnymi z-index'ami ?
roobik
Najlepsze jest to, że robię w php+MySQL, ale ze stylami to "mam problem". Nawet nie wiem o co chodzi sad.gif
Czy byłbyśtak dobry i podał przykład?
Pls...
tommy4
po prostu dodajesz do stylów "z-index: 0;" "z-index: 1;" i tak dalej, im większy index, tym wyżej jest div. Nie jestem pewien, ale chyba będziesz musiał wykorzystać position:absolute; żeby to poprawnie działało.
roobik
Na podst innego postu (dotyczącego podobnej sprawy) zrobiłem coś takiego:
  1. <div style="z-index:0; width: 100%; height: 100%; text-align: center; vertical-align: middle; border: 1px #ff0000 solid;">
  2. <span><font face=verdana size=7><b>4</b></font><div id="costam" style="width: 100%; height: 100%; color: #ffffff; vertical-align: middle;">
  3. <font face=verdana size=1 color=#000000><B>Jakiś tekst Jakiś tekst Jakiś tekst</B></span></font>


sadsmiley02.gif

Przewertowałem kilkanaście stron z "lekcjami CSS", ale tam nigdzie nie mogę znaleźć odpowiedzi...
strife
Cytat
Przewertowałem kilkanaście stron z "lekcjami CSS", ale tam nigdzie nie mogę znaleźć odpowiedzi...


Cytat
po prostu dodajesz do stylów "z-index: 0;" "z-index: 1;" i tak dalej, im większy index, tym wyżej jest div. Nie jestem pewien, ale chyba będziesz musiał wykorzystać position:absolute; żeby to poprawnie działało.


Tutaj masz odpowiedź na tacy podaną leniu !tongue.gif Miałem wczoraj urodziny i mam dosyć dobry humor więc masz poniżej odpowiedź winksmiley.jpg

  1. .a1{
  2. position: absolute;
  3. width: 200px;
  4. z-index: 50;
  5. font-weight: bold;
  6.  
  7. }
  8. .a2{
  9. position: absolute;
  10. width: 200px;
  11. z-index: 40;
  12. font-size: 10em;
  13. font-weight: bold;
  14. margin-top: -30px;
  15. color: white;
  16. background-color: red;
  17. }
  18.  
  19.  
  20. <div class="a1">tekst tekst tekst tekst tekst tekst tekst tekst
  21. tekst tekst tekst tekst tekst tekst tekst tekst tekst
  22. tekst tekst tekst tekst tekst tekst tekst tekst tekst
  23. tekst tekst tekst tekst tekst tekst tekst tekst tekst
  24. tekst tekst tekst tekst tekst</div>
  25. <div class="a2">69</div>


tongue.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.