Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podwójne tła
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
BDCC
Czy istnieje możliwość zrobienia dwóch tłeł dla jednego znacznika? Chodzi mi o to:

Uzyskać coś takiego:

Efekt taki uzyskałem przez to:

dając jedno tło w blockquote a drugie w p, ale zajdzie konieczność używania wielu <p> dolne tło się powtarza... czy jest jakaś rada na to?
gekon
W CSS 2.1 nie ma takiej możliwości. Są dwa sposoby: albo jako "Koniec cytatu" wstawisz obrazek, albo ostatniemu elementowi w blockquote dasz tło (gdyby IE obsługiwał :last-child to nie byłoby problemu..). Moim zdaniem lepiej jest wrzucić obrazek na dole.
Zajec
Jesteś skłonny olać IE?

Kod
blockquote {
background: url() center top no-repeat;
}
blockquote:after {
display: block;
content: "";
height: 30px;
background: url() no-repeat;
}
devnul
a moze tak
  1. <blockquote><p class="cytat">
  2. jakiś cytat
  3. <p>inne "p"</p>


i css
Kod
blockquote { background:transparent  url('tlo.gif') no-repeat top}
blockquote p.cytat{ background:transparent  url('tlo.gif') no-repeat  bottom}

w ie działa w innych tez - i to chyba rozwiaze twój problem?
mozna tez zrobic tak
Kod
blockquote { background:transparent  url('tlo.gif') no-repeat top}
blockquote>p{ background:transparent  url('tlo.gif') no-repeat  bottom}

zadziała to w ie 7 i nie ma koniecznosci deklaracji nazwy klasy
Zajec
@devnul sądzę, że BDCC potrafi zrobić dwa tła używając dwóch znaczników. Chodziło raczej o dwa tła przy pomocy samego blockquote.

Co więcej Twoje rozwiązanie jest nieprawiłowe, bo umieszczacz p wewnątrz p.

p jest elementem blokowym, a można w nim umieszczać tylko elementy liniowe. Należałoby więc użyć div'a.
BDCC
Cytat(Zajec @ 14.08.2006, 19:21 ) *
Jesteś skłonny olać IE?

Kod
blockquote {
background: url() center top no-repeat;
}
blockquote:after {
display: block;
content: "";
height: 30px;
background: url() no-repeat;
}


I zdaje, że zaczne olewać IE, bo ta przeglądarka coraz bardziej zaczyna mnie wkurzać :/ Dziękuje, wszystkim za pomoc smile.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.