Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tło tabeli ala gradient
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
lectric
Hej

Probuje wykonac cos takiego:

jest tabela np 700 x 500. Chcem dac jej tlo od gory szary rozjasniajac sie w dol do bialego (typowy gradient).

Robie tak:
przygotowalem pasek o szerokosci 1 px (gradient) wstawiam go do klasy w css jako tlo tabeli.
Wszystko ladnie piekie, tylko gdy tabela sie zwieksza w wysokoscie (dochodzi wiecej tekstu w tabeli) tlo zaczyna sie brzydko powtarzac od nowa sad.gif
Dodatkowo wstawiajac w ta tabele inna tabelke tlo tej nowy zawsze jest biale a chcem zeby bylo przezroczyste.

prosze i pomoc.
maryaan
najprosciej zrobic tak:
1. ustalasz graniczne wartosci dla gradientu ciemnySzary i jasnySzary
2. ustalasz liczbe wierszy
3. obliczasz aktualny gradient dla kolejnych wierszy
numerWIersza * ((jasnySzary-ciemnySzary)/ileWIerszy) + ciemnySzary
i przypisujesz do kazdego wiersza styl zawierajacy kolor tla z wartosciami z powyzszych obliczen
E -dd
Wystarczy że zrobisz tak
Kod
background: url('tlo.gif') #color repeat-x;

#color to wartość koloru na którym się kończy grandient. Repeat-x odpowiada za powtarzanie tła graficznego. Jeśli chcesz zeby powtarzało w pionie a nie poziomie daj repeat-y.
gekon
A co to za matematyczna magia? Ja bym zrobił to tak:
  1. table {
  2. ...
  3. background: url("obrazek.png") repeat-x top left;
  4. ...
  5. }
  6. table table { background-color: transpaernt; }
lectric
eh no ok, podstawiany obrazek.png ma domyslne rozmiary szerokosc 1px wysokosc 200 px, gdy tabela ma wysokosc 200px jest ok ale gdy zwiekszy sie jej wysokosc o 50 px, tlo z obrazek.png zaczyna sie na nowo po raz drugi (od dolu) sad.gif
gekon
Pokaż kod bo widzę, że się nie dogadamy.
lectric
  1. TD.MAIN {
  2. background-image:url('img/main_bg.gif');
  3. background-repeat:repeat-y fixed;
  4. }
gekon
No więc nie dawaj tła dla td, tylko dla table - tak jak pokazałem w przykładzie (chyba, że chcesz żeby każda komórka miała oddzielne tło). I jeszcze jak ustawiasz atrybuty oddzielnie to nie dawaj im dwóch wartości (fixed to background-position a nie repeat).
lectric
No ok. Tylko dalej pozostaje nie rozwiazane dla mnie najwazniejsze, jesli tlem dla komorki / tabeli czego kolwiek, jest plik obrazek.png o wymiarach 1px szerokosci i 200 px wysokosci i np. tabelka (wysokosc 200px) posiada takie tlo z takiego obrazka zacznie sie robic wieksza (np wysokosc 400px) to tlo zacznie sie powtarzac od nowa czego nie chce.
gekon
Za powtarzanie tła odpowiada właściwośc background-repeat i może przyjmować ona wartości: repeat (domyślna), repeat-x (powtarzanie w poziomie), repeat-y (powtarzanie w pionie), no-repeat (brak powtarzania), może być także dziedziczona. W Twoim przypadku powinno wyglądać to tak:

  1. table{
  2. //jakis inny kod
  3. background-repeat: repeat-x;
  4. //jakis inny kod
  5. }


Wartość fixed, którą wstawiłeś w swoim kodzie może przyjmowac właściwość background-position.
lectric
no ok, i tak jest repeat-x ladnie wyglada tabelka ale co bedzie z tlem gdy tabelka bedzie wieksza ? np 300 px wysokosc - a plik tla ma wysokosci 200px ?

Tlo zacznie sie powtarzac od nowa czego ja nie chcem.
gekon
Boże ile razy można Ci tłumaczyć?! Jeżeli będzie repeat-x to tło nie będzie sie powtarzać na wysokość! Chyba, że coś zrobiłes źle, ale tego Ci nikt nie powie dopóki nie pokażesz kodu.
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.