Forum PHP.pl > [CSS]3-częściowe tło z przeźroczystością.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]3-częściowe tło z przeźroczystością.

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Sky_walker

12.07.2009, 16:50:36

Usiłuję zrobić stronę gdzie tło będzie składało się z półprzeźroczystych obrazków z których środkowy będzie rozciągał się zależnie od ilości tekstu.

Całość powinna wyglądać tak:
-----
tło 1
-----
.
.
rozciągalne tło (2)
.
.
-----
tło 3
-----
^ NA tym tle powinien wyświetlać się tekst.

Jako, że tła są półprzeźroczyste nie mogę po prostu wstawić div'ów z ujemnym marginesem dolnym/górnym do środka div'a z tłem 2.

Ktoś mógłby poddać pomysł jak to zrealizować?

Próbowałem z czymś takim:

[HTML] pobierz, plaintext 
<div class="bg_top"> </div>
<div class="bg_middle">
aAa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
</div> <!-- </div class="bg_middle"> -->
<div class="bg_bottom"> </div>
[HTML] pobierz, plaintext

i CSS:

Kod

.bg_top {
  background:       url('img/body_top.png') top center no-repeat;
  width:            1090px;
  height:           234px;
  margin:           0 auto;
}
.bg_bottom {
  background:       url('img/body_bottom.png') top center no-repeat;
  width:            1090px;
  height:           218px;
  margin:           0 auto;
}
.bg_middle {
  background:       url('img/body_mid.png') top center repeat-y;
  width:            1090px;
  margin:           0 auto;
  padding-top:      -224px;
  padding-bottom:   -208px;
}

Tylko... właśnie - ujemny padding nie działa. Z kolei jeśli wsadzę treść w div'a i jemu dam ujemne marginesy - bg_middle zaczyna nakładać się na bg_bottom i bg_top (co też odpada, bo tła są półprzeźroczyste).

Problem nie banalny... gdyby tła były zwykłymi JPGami to problemu by nie było - zasłoniłoby się jedno drugim i byłoby ok, ale tutaj... już tak prosto nie jest.
Bardzo proszę o pomoc....

~Sky

erix

12.07.2009, 23:00:13

Ujemny możesz dać najwyżej margin, ew. position: relative; top: -Ypx; left: -Xpx;.

Tak nawiasem, to po co chcesz ujemne dawać...?

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.