+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Dwa tła? (/thread-dwa-tla)
Dwa tła? - neves - 14-01-2012
Witam. Otóż ostatnio podczas tworzenia strony natknąłem się na mały problem. Mianowicie chciałem stworzyć pasek, którego tło składałoby się z gradientu i obrazka. Kod wygląda tak:
Kod:
.menu {
background-image: linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
background-image: -o-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
background-image: -moz-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
background-image: -webkit-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
background-image: -ms-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
background-image: -webkit-gradient(linear,right top,left top,color-stop(0, #000000),color-stop(0.5, #0E211E),color-stop(1, #000000));
background-image:url('img/logo.png');
background-repeat:no-repeat;
background-position: top;
height: 60px;
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
}Problem w tym, że w tej chwili wyświetla mi się jedynie obrazek logo (gradient znika). Jeśli przełożę kod background-image:url('img/logo.png'); na samą górę to wyświetli mi się sam gradient bez loga. Da się wyświetlić 2 obrazki na sobie czy trzeba tworzyć oddzielnego diva nakładającego się na div menu?
RE: Dwa tła? - Ancik - 14-01-2012
Jedna klasa/id = jeden obrazek, ewentualnie obrazek + kolor (w postaci kodu szesnastkowego a nie obrazka). Możesz ewentualnie pokombinować, i w tego diva wsadzić jakiegoś innego diva i jemu nadawać tło itp. To wszystko jednak zależy od efektu, jaki chcesz uzyskać.
Jeżeli chcesz mieć tło pod logiem, to zrób jeden div z tłem, w niego wsadź diva z logiem o rozszerzeniu .png (obsługuje przezroczystość) i po kłopocie.
Druga opcja to tło w css, a logo jako <img> w htmlu.
RE: Dwa tła? - donpedro - 15-01-2012
wykorzystaj polecenie index aby schierarchizowac warstwy. drugie wykorzystaj efet przezroczystosci cecha opacity, odpowiedzialna za przeźroczystość.
Piszesz np.
Kod:
Kod:
selektor
{
opacity:0.2;
}IE jej nie obsługuje. W IE musisz napisać np.:
Kod:
Kod:
selektor
{
filter:alpha(opacity:20);
}Czyli, jeżeli chcesz by element był przeźroczysty w trzech najpopularniejszych przeglądarkach piszesz:
Kod:
selektor
{
opacity:0.2;
filter:alpha(opacity:20);
}RE: Dwa tła? - Kartofelek - 15-01-2012
http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients